@@ -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
136161Secondary 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