Skip to content

Commit

Permalink
docs(list): add nav list docs
Browse files Browse the repository at this point in the history
  • Loading branch information
kara committed Apr 19, 2016
1 parent 235f65d commit 320329b
Showing 1 changed file with 27 additions and 2 deletions.
29 changes: 27 additions & 2 deletions src/components/list/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,14 @@ use `<md-divider>` tags.
<md-list-item *ngFor="#folder of folders">
<i md-list-avatar class="material-icons">folder</i>
<h4 md-line>{{folder.name}}</h4>
<p md-line class="demo-secondary-text"> {{folder.updated}} </p>
<p md-line class="demo-2"> {{folder.updated}} </p>
</md-list-item>
<md-divider></md-divider>
<h3 md-subheader>Notes</h3>
<md-list-item *ngFor="#note of notes">
<i md-list-avatar class="material-icons">note</i>
<h4 md-line>{{note.name}}</h4>
<p md-line class="demo-secondary-text"> {{note.updated}} </p>
<p md-line class="demo-2"> {{note.updated}} </p>
</md-list-item>
</md-list>
```
Expand All @@ -132,6 +132,31 @@ Output:

<img src="https://material.angularjs.org/material2_assets/list/subheader-list.png">

### Navigation lists

Use `md-nav-list` tags for navigation lists (i.e. lists that have anchor tags).

Simple nav lists can tack an `md-list-item` attribute onto the anchor tag itself:

```html
<md-nav-list>
<a md-list-item href="..." *ngFor="#link of links"> {{ link }} </a>
</md-nav-list>
```

If you require a more complex nav list (e.g. with more than one target per item), wrap your anchor tag in an `md-list-item` element.

```html
<md-nav-list>
<md-list-item *ngFor="#link of links">
<a md-line href="...">{{ link }}</a>
<button md-icon-button (click)="showInfo(link)">
<i class="material-icons">info</i>
</button>
</md-list-item>
</md-nav-list>
```

### Lists with secondary text
Secondary text styling will be part of a broader typography module to
[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component
Expand Down

0 comments on commit 320329b

Please sign in to comment.