Skip to content

Commit e6693bf

Browse files
committed
docs(list): add docs for subheaders and dividers in lists
1 parent 915dd9b commit e6693bf

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

src/components/list/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,33 @@ Output:
105105

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

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+
108135
### Lists with secondary text
109136
Secondary text styling will be part of a broader typography module to
110137
[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component

0 commit comments

Comments
 (0)