Skip to content

Commit 320329b

Browse files
committed
docs(list): add nav list docs
1 parent 235f65d commit 320329b

File tree

1 file changed

+27
-2
lines changed

1 file changed

+27
-2
lines changed

src/components/list/README.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,14 @@ use `<md-divider>` tags.
116116
<md-list-item *ngFor="#folder of folders">
117117
<i md-list-avatar class="material-icons">folder</i>
118118
<h4 md-line>{{folder.name}}</h4>
119-
<p md-line class="demo-secondary-text"> {{folder.updated}} </p>
119+
<p md-line class="demo-2"> {{folder.updated}} </p>
120120
</md-list-item>
121121
<md-divider></md-divider>
122122
<h3 md-subheader>Notes</h3>
123123
<md-list-item *ngFor="#note of notes">
124124
<i md-list-avatar class="material-icons">note</i>
125125
<h4 md-line>{{note.name}}</h4>
126-
<p md-line class="demo-secondary-text"> {{note.updated}} </p>
126+
<p md-line class="demo-2"> {{note.updated}} </p>
127127
</md-list-item>
128128
</md-list>
129129
```
@@ -132,6 +132,31 @@ Output:
132132

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

135+
### Navigation lists
136+
137+
Use `md-nav-list` tags for navigation lists (i.e. lists that have anchor tags).
138+
139+
Simple nav lists can tack an `md-list-item` attribute onto the anchor tag itself:
140+
141+
```html
142+
<md-nav-list>
143+
<a md-list-item href="..." *ngFor="#link of links"> {{ link }} </a>
144+
</md-nav-list>
145+
```
146+
147+
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.
148+
149+
```html
150+
<md-nav-list>
151+
<md-list-item *ngFor="#link of links">
152+
<a md-line href="...">{{ link }}</a>
153+
<button md-icon-button (click)="showInfo(link)">
154+
<i class="material-icons">info</i>
155+
</button>
156+
</md-list-item>
157+
</md-nav-list>
158+
```
159+
135160
### Lists with secondary text
136161
Secondary text styling will be part of a broader typography module to
137162
[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component

0 commit comments

Comments
 (0)