@@ -116,14 +116,14 @@ use `<md-divider>` tags.
116
116
<md-list-item *ngFor =" #folder of folders" >
117
117
<i md-list-avatar class =" material-icons" >folder</i >
118
118
<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 >
120
120
</md-list-item >
121
121
<md-divider ></md-divider >
122
122
<h3 md-subheader >Notes</h3 >
123
123
<md-list-item *ngFor =" #note of notes" >
124
124
<i md-list-avatar class =" material-icons" >note</i >
125
125
<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 >
127
127
</md-list-item >
128
128
</md-list >
129
129
```
@@ -132,6 +132,31 @@ Output:
132
132
133
133
<img src =" https://material.angularjs.org/material2_assets/list/subheader-list.png " >
134
134
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
+
135
160
### Lists with secondary text
136
161
Secondary text styling will be part of a broader typography module to
137
162
[ come later] ( https://github.com/angular/material2/issues/205 ) , and won’t be implemented as part of this component
0 commit comments