honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: improve accessibility of architecture example (#41314) 

PR Close #41314
This commit is contained in:
Kapunahele Wong 2021-03-22 11:01:38 -04:00 committed by Jessica Janiuk
parent 326884736e
commit 01e546f116
7 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
View File

@ -88,7 +88,7 @@ async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
const id = await detail.all(by.css('div')).first().getText();
// Get name from the h2
const name = await detail.element(by.css('h4')).getText();
const name = await detail.element(by.css('app-hero-detail h2')).getText();
return {
id: +id.substr(id.indexOf(' ') + 1),
name: name.substr(0, name.lastIndexOf(' ')),

1
aio/content/examples/architecture/src/app/app.component.ts
View File

@ -5,6 +5,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Architecture Example</h1>
<app-hero-list></app-hero-list>
<app-sales-tax></app-sales-tax>
`

16
aio/content/examples/architecture/src/app/hero-detail.component.html
View File

@ -1,10 +1,10 @@
<hr>
<h4>{{hero.name}} Detail</h4>
<h2>{{hero.name}} Detail</h2>
<div>Id: {{hero.id}}</div>
<label>Name:
<!-- #docregion ngModel -->
<input [(ngModel)]="hero.name">
<!-- #enddocregion ngModel -->
</label>
<br />
<label>Power: <input [(ngModel)]="hero.power"></label>
<label for="hero-name">Name: </label>
<!-- #docregion ngModel -->
<input type="text" id="hero-name" [(ngModel)]="hero.name">
<!-- #enddocregion ngModel -->
<label for="hero-power">Power: </label>
<input type="text" for="hero-name" [(ngModel)]="hero.power">

2
aio/content/examples/architecture/src/app/hero-list.component.html
View File

@ -1,7 +1,7 @@
<!-- #docregion -->
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<p><i>Select a hero from the list to see details.</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}

9
aio/content/examples/architecture/src/app/sales-tax.component.ts
View File

@ -7,11 +7,12 @@ import { TaxRateService } from './tax-rate.service';
selector: 'app-sales-tax',
template: `
<h2>Sales Tax Calculator</h2>
<label>Amount: <input #amountBox (change)="0"></label>
<p><i>Enter a number and press enter to calculate tax.</i></p>
<label for="amount-input">Amount: </label>
<input type="text" id="amount-input" #amountBox (change)="0">
<div *ngIf="amountBox.value">
The sales tax is
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
<p>The sales tax is
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}</p>
</div>
`,
providers: [SalesTaxService, TaxRateService]

23
aio/content/examples/architecture/src/assets/architecture.css Normal file
View File

@ -0,0 +1,23 @@
ul {
padding-left: 0;
}
li {
list-style-type: none;
padding: 1rem;
background-color: aliceblue;
border: 1px solid #444;
margin-bottom: .5rem;
}
li:hover {
background-color: #444;
color: white;
cursor: pointer;
}
label {
display: block;
padding-bottom: .4rem;
margin-top: 1rem;
}

3
aio/content/examples/architecture/src/index.html
View File

@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="stylesheet" href="assets/architecture.css">
</head>
<body>
<app-root></app-root>
</body>