<mat-divider> 是一个 Material 风格的分割线组件，支持多种方向选项。

简单分割线

<mat-divider> 元素可单独使用，以创建一个带有 Material 主题的水平线或垂直线。

<mat-divider></mat-divider>

内部分割线

添加 inset 属性，以设置该分割线是否内部的。

<mat-divider [inset]="true"></mat-divider>

垂直分割线

添加 vertical 属性，以设置该分割线是否垂直方向的。

<mat-divider [vertical]="true"></mat-divider>

带有内部分割线的列表

可以将分割线添加到列表中，来把内容分成不同的部分。 还可以把内部分割线添加到列表中，以在外观上区分不同的元素，以免头像、图标等内容显得乱糟糟的。 请确保不要给列表中最后一个元素添加分割线，因为这样容易和节分割线重叠在一起。

<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>

无障碍性

MatDivider 会应用 ARIA role="separator" 属性，以实现用于区分内容分节的、带有不可聚焦样式的分隔符。