File tree Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -105,6 +105,33 @@ Output:
105
105
106
106
<img src =" https://material.angularjs.org/material2_assets/list/dense-list.png " >
107
107
108
+ ### Lists with multiple sections
109
+
110
+ You can add a subheader to a list by annotating a heading tag with an ` md-subheader ` attribute. To add a divider,
111
+ use ` <md-divider> ` tags.
112
+
113
+ ``` html
114
+ <md-list >
115
+ <h3 md-subheader >Folders</h3 >
116
+ <md-list-item *ngFor =" #folder of folders" >
117
+ <i md-list-avatar class =" material-icons" >folder</i >
118
+ <h4 md-line >{{folder.name}}</h4 >
119
+ <p md-line class =" demo-secondary-text" > {{folder.updated}} </p >
120
+ </md-list-item >
121
+ <md-divider ></md-divider >
122
+ <h3 md-subheader >Notes</h3 >
123
+ <md-list-item *ngFor =" #note of notes" >
124
+ <i md-list-avatar class =" material-icons" >note</i >
125
+ <h4 md-line >{{note.name}}</h4 >
126
+ <p md-line class =" demo-secondary-text" > {{note.updated}} </p >
127
+ </md-list-item >
128
+ </md-list >
129
+ ```
130
+
131
+ Output:
132
+
133
+ <img src =" https://material.angularjs.org/material2_assets/list/subheader-list.png " >
134
+
108
135
### Lists with secondary text
109
136
Secondary text styling will be part of a broader typography module to
110
137
[ come later] ( https://github.com/angular/material2/issues/205 ) , and won’t be implemented as part of this component
You can’t perform that action at this time.
0 commit comments