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

docs: improve accessibility of tohpt3 (#40617) 

PR Close #40617
This commit is contained in:
Kapunahele Wong 2021-01-26 13:15:13 -05:00 committed by atscott
parent bd6f377db2
commit 1f7921be33
4 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
View File

@ -0,0 +1,3 @@
input {
padding: .5rem;
}

5
aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
View File

@ -3,9 +3,8 @@
<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
<label for="hero-name">Hero name: </label>
<input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
</div>
</div>

12
aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
View File

@ -16,16 +16,20 @@
border-radius: 4px;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
color: #2c3a41;
background-color: #e6e6e6;
left: .1em;
}
.heroes li.selected {
background-color: #CFD8DC;
background-color: black;
color: white;
}
.heroes li.selected:hover {
background-color: #BBD8DC;
background-color: #505050;
color: white;
}
.heroes li.selected:active {
background-color: black;
color: white;
}
.heroes .badge {

13
aio/content/tutorial/toh-pt3.md
View File

@ -12,7 +12,7 @@ The `HeroDetailComponent` will present details of a selected hero.
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
For the sample application that this page describes, see the <live-example></live-example>.
</div>
@ -79,13 +79,12 @@ Add a `hero` property, preceded by the `@Input()` decorator.
That's the only change you should make to the `HeroDetailComponent` class.
There are no more properties. There's no presentation logic.
This component simply receives a hero object through its `hero` property and displays it.
This component only receives a hero object through its `hero` property and displays it.
## Show the `HeroDetailComponent`
The `HeroesComponent` is still a master/detail view.
It used to display the hero details on its own, before you cut that portion of the template. Now it will delegate to the `HeroDetailComponent`.
The `HeroesComponent` used to display the hero details on its own, before you removed that portion of the template.
This section guides you through delegating logic to the `HeroDetailComponent`.
The two components will have a parent/child relationship.
The parent `HeroesComponent` will control the child `HeroDetailComponent`
@ -121,7 +120,7 @@ The revised `HeroesComponent` template should look like this:
<code-example path="toh-pt3/src/app/heroes/heroes.component.html"
header="heroes.component.html"></code-example>
The browser refreshes and the app starts working again as it did before.
The browser refreshes and the application starts working again as it did before.
## What changed?
@ -131,7 +130,7 @@ Now the `HeroDetailComponent` is presenting those details instead of the `Heroes
Refactoring the original `HeroesComponent` into two components yields benefits, both now and in the future:
1. You simplified the `HeroesComponent` by reducing its responsibilities.
1. You reduced the `HeroesComponent` responsibilities.
1. You can evolve the `HeroDetailComponent` into a rich hero editor
without touching the parent `HeroesComponent`.