67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
`<mat-divider>` is a component that allows for Material styling of a line separator with various orientation options.
|
|
|
|
<!-- example(divider-overview) -->
|
|
|
|
|
|
### Simple divider
|
|
|
|
A `<mat-divider>` element can be used on its own to create a horizontal or vertical line styled with a Material theme
|
|
|
|
```html
|
|
<mat-divider></mat-divider>
|
|
```
|
|
|
|
### Inset divider
|
|
|
|
Add the `inset` attribute in order to set whether or not the divider is an inset divider.
|
|
|
|
```html
|
|
<mat-divider [inset]="true"></mat-divider>
|
|
```
|
|
|
|
### Vertical divider
|
|
|
|
Add the `vertical` attribute in order to set whether or not the divider is vertically-oriented.
|
|
|
|
```html
|
|
<mat-divider [vertical]="true"></mat-divider>
|
|
```
|
|
|
|
|
|
### Lists with inset dividers
|
|
|
|
Dividers can be added to lists as a means of separating content into distinct sections.
|
|
Inset dividers can also be added to provide the appearance of distinct elements in a list without cluttering content
|
|
like avatar images or icons. Make sure to avoid adding an inset divider to the last element
|
|
in a list, because it will overlap with the section divider.
|
|
|
|
```html
|
|
<mat-list>
|
|
<h3 mat-subheader>Folders</h3>
|
|
@for (folder of folders; track folder) {
|
|
<mat-list-item>
|
|
<mat-icon mat-list-icon>folder</mat-icon>
|
|
<h4 mat-line>{{folder.name}}</h4>
|
|
<p mat-line class="demo-2">{{folder.updated}}</p>
|
|
@if (!$last) {
|
|
<mat-divider [inset]="true"></mat-divider>
|
|
}
|
|
</mat-list-item>
|
|
}
|
|
<mat-divider></mat-divider>
|
|
<h3 mat-subheader>Notes</h3>
|
|
@for (note of notes; track node) {
|
|
<mat-list-item>
|
|
<mat-icon mat-list-icon>note</mat-icon>
|
|
<h4 mat-line>{{note.name}}</h4>
|
|
<p mat-line class="demo-2"> {{note.updated}} </p>
|
|
</mat-list-item>
|
|
}
|
|
</mat-list>
|
|
```
|
|
|
|
### Accessibility
|
|
|
|
`MatDivider` applies the ARIA `role="separator"` attribute, exclusively implementing the
|
|
non-focusable style of separator that distinguishes sections of content.
|