纸片允许用户查看信息、进行选择、过滤内容和输入数据。

纸片总是在容器内使用。要创建纸片，请从 <mat-chip-set> 元素开始。然后，将 <mat-chip> 元素嵌套在 <mat-chip-set> 中。

默认情况下， <mat-chip> 会渲染应用了 Material Design 样式的纸片。对于未应用样式的纸片，请使用 <mat-basic-chip> 。

提示： <mat-basic-chip> 除了 mat-mdc-chip 类之外，还会收到 mat-mdc-basic-chip CSS 类。

虽然 <mat-chip> 不是交互式的，但你可以设置 disabled 输入以使其具有禁用态外观。

<mat-chip disabled>Orange</mat-chip>

使用 <mat-chip-listbox> 和 <mat-chip-option> 从列表中选择一个或多个条目。从创建一个 <mat-chip-listbox> 元素开始。如果用户可以选择多个选项，请添加 multiple 属性。在 <mat-chip-listbox> 中为每个可用选项嵌套一个 <mat-chip-option> 元素。

使用输入属性 disabled 来禁用 <mat-chip-option> 。这为 <mat-chip-option> 提供了禁用的外观，并阻止用户与其交互。

<mat-chip-option disabled>Orange</mat-chip-option>

用户可以使用箭头键在纸片中移动，并使用空格选定/取消选定它们。单击时条状图也会获得焦点，确保键盘导航从当前聚焦的条状图开始。

使用 <mat-chip-grid> 和 <mat-chip-row> 来帮助用户输入文本。

纸片总是在容器内使用。要创建连接到输入字段的纸片，首先创建一个 <mat-chip-grid> 作为容器。添加一个 <input/> 元素，并通过把 matChipInputFor 传给 Input 将其注册到 <mat-chip-grid> 。始终将 <input/> 元素与 <mat-chip-grid> 一起使用。为用户输入的每条数据在 <mat-chip-grid> 中嵌套一个 <mat-chip-row> 元素。使用纸片进行文本输入的示例。

使用 disabled 的输入来禁用 <mat-chip-row> 。这为 <mat-chip-row> 提供了禁用的外观，并阻止用户与其交互。

<mat-chip-row disabled>Orange</mat-chip-row>

用户可以使用方向键在纸片之间移动，也可以用空格键选择它们或取消选择。 在点击时，纸片还会获得焦点，以确保会从合适的纸片开始导航。

用户可以按删除键删除纸片。按删除键会触发纸片上 removed 的输出属性，因此如果你需要该功能，请务必实现 removed 。

具有自动完成功能的纸片输入示例。

你可以向纸片添加图标以标识出实体（如个人）并提供附加功能。

添加最多两个带有内容投影的图标

你可以向单个纸片添加两个额外的图标。一块纸片有两个插槽，可以使用内容投影来显示图标。所有纸片变体都支持添加图标，包括 <mat-chip> 、 <mat-chip-option> 和 <mat-chip-row> 。

纸片有一个用于添加头像图像的正面插槽。要添加头像，请在 <mat-chip> 中嵌套一个具有 matChipAvatar 属性的元素。

你可以通过使用 matChipTrailingIcon 或 matChipRemove 属性嵌套元素来向后槽添加额外的图标。

有时最终用户希望能够移除纸片。你可以使用 matChipRemove 提供该功能。 matChipRemove 会渲染到纸片的后插槽，并在单击时触发 removed 的输出。

要创建移除按钮，请在 <mat-chip-option> 中嵌套一个具有 matChipRemove 属性的 <button> 元素。请务必实现 removed 输出属性。

 <mat-chip-option>
  Orange
  <button matChipRemove aria-label="Remove orange">
    <mat-icon>cancel</mat-icon>
  </button>
</mat-chip-option>

有关如何创建无障碍图标的信息，请参阅无障碍性部分。

默认情况下，纸片是水平显示的。要垂直堆叠纸片，请将 mat-mdc-chip-set-stacked 类应用于 <mat-chip-set> 、 <mat-chip-listbox> 或 <mat-chip-grid> 。

使用 MAT_CHIPS_DEFAULT_OPTIONS 令牌指定纸片模块的默认选项。

@NgModule({
  providers: [
    {
      provide: MAT_CHIPS_DEFAULT_OPTIONS,
      useValue: {
        separatorKeyCodes: [COMMA, SPACE]
      }
    }
  ]
})

默认情况下，纸片使用原色。指定 color 属性以将颜色更改为 accent 或 warn 。

纸片组件支持 3 种用户交互模式，每种模式都有自己的容器和纸片元素：

<mat-chip-listbox> 和 <mat-chip-option> ：这些元素实现了列表框无障碍模式。使用它们来渲染一组可供用户选定的选项。

<mat-chip-listbox aria-label="select a shirt size">
  <mat-chip-option> Small </mat-chip-option>
  <mat-chip-option> Medium </mat-chip-option>
  <mat-chip-option> Large </mat-chip-option>
</mat-chip-listbox>

文字输入

<mat-chip-grid> 和 <mat-chip-row> ：这些元素实现了网格无障碍性模式。将它们用作自由表单输入的一部分，允许用户输入文本以添加纸片。

<mat-form-field>
  <mat-chip-grid #myChipGrid [(ngModel)]="mySelection"
    aria-label="enter sandwich fillings">
    @for (filling of fillings; track filling) {
      <mat-chip-row (removed)="remove(filling)">
        {{filling.name}}
        <button matChipRemove>
          <mat-icon>cancel</mat-icon>
        </button>
      </mat-chip-row>
    }
    <input [matChipInputFor]="myChipGrid"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           (matChipInputTokenEnd)="add($event)" />
  </mat-chip-grid>
</mat-form-field>

静态内容

<mat-chip-set> 和 <mat-chip> 作为无序列表：表示一个非交互式条目列表。这种交互模式模仿使用 ul 和 li 元素。将 role="list" 应用于 <mat-list> 。将 role="listitem" 应用于每个 <mat-list-item> 。

<mat-chip-set role="list">
  <mat-chip role="listitem"> Sugar </mat-chip>
  <mat-chip role="listitem"> Spice </mat-chip>
  <mat-chip role="listitem"> Everything Nice </mat-chip>
</mat-chip-set>

<mat-chip-set> 和 <mat-chip> ：这些元素不实现任何特定的无障碍模式。根据上下文添加适当的辅助功能。请注意，Angular Material 并不打算让 <mat-chip> 、 <mat-basic-chip> 和 <mat-chip-set> 进行交互。

<mat-chip-set>
  <mat-chip> John </mat-chip>
  <mat-chip> Paul </mat-chip>
  <mat-chip> James </mat-chip>
</mat-chip-set>

交互模式部分描述了可用纸片的三种变体。选择最适合你的用例的纸片变体。

对于 MatChipGrid 和 MatChipListbox，始终通过 aria-label 或 aria-labelledby 将无障碍标签应用于控件。

始终将 MatChipRemove 应用于 <button> 元素，而不是 <mat-icon> 元素。

使用 MatChipListbox 时，切勿在 <mat-chip-option> 元素内嵌套其他交互式控件。嵌套控件会降低辅助技术用户的体验。

默认情况下，MatChipListbox 会显示选中标记以标识所选条目。虽然你可以通过 hideSingleSelectionIndicator 隐藏单选时的选中标记指示器，但这会使用户更难甚至不可能直观地识别所选条目，从而降低组件的无障碍性。

如果纸片是可编辑的，则向辅助技术提供如何使用键盘编辑此纸片的说明。达成此目的的方法之一是添加 aria-description 属性，其中包含“按 Enter 键来编辑此纸片”的说明。