cargdev/angular
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: port accessibility app from stackblitz to aio (#32377)

Browse Source 
Fixes #32320

PR Close #32377
This commit is contained in:
Kapunahele Wong
2019-08-27 15:17:04 -04:00
committed by Matias Niemelä
parent 544eb89198
commit 25d90dabbe
12 changed files with 134 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
aio/content/examples/accessibility/src/app/app.component.css Executable file
View File

13
aio/content/examples/accessibility/src/app/app.component.html Executable file
View File

@ -0,0 +1,13 @@
<h1>Accessibility Example</h1>
<!-- #docregion template -->
<label>
Enter an example progress value
<input type="number" min="0" max="100"
[value]="progress" (input)="progress = $event.target.value">
</label>
<!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
<app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
</app-example-progressbar>
<!-- #enddocregion template -->

10
aio/content/examples/accessibility/src/app/app.component.ts Executable file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
progress = 0;
}

12
aio/content/examples/accessibility/src/app/app.module.ts Executable file
View File

@ -0,0 +1,12 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ExampleProgressbarComponent } from './progress-bar.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, ExampleProgressbarComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

12
aio/content/examples/accessibility/src/app/progress-bar.component.css Executable file
View File

@ -0,0 +1,12 @@
:host {
display: block;
width: 300px;
height: 25px;
border: 1px solid black;
margin-top: 16px;
}
.bar {
background: blue;
height: 100%;
}

28
aio/content/examples/accessibility/src/app/progress-bar.component.ts Executable file
View File

@ -0,0 +1,28 @@
// #docregion progressbar-component
import { Component, Input } from '@angular/core';
/**
* Example progressbar component.
*/
@Component({
selector: 'app-example-progressbar',
template: `<div class="bar" [style.width.%]="value"></div>`,
styleUrls: ['./progress-bar.component.css'],
host: {
// Sets the role for this component to "progressbar"
role: 'progressbar',
// Sets the minimum and maximum values for the progressbar role.
'aria-valuemin': '0',
'aria-valuemax': '100',
// Binding that updates the current value of the progressbar.
'[attr.aria-valuenow]': 'value',
}
})
export class ExampleProgressbarComponent {
/** Current value of the progressbar. */
@Input() value = 0;
}
// #enddocregion progressbar-component

14
aio/content/examples/accessibility/src/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Accessibility Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

11
aio/content/examples/accessibility/src/main.ts Normal file
View File

@ -0,0 +1,11 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);