Angular Material 芯片

md-chips 是一个 Angular 指令，用作名为 chip 的特殊组件。它用于表示一小部分信息，例如联系人、标签等。可以使用自定义模板来呈现 chip 的内容。这可以通过指定包含自定义内容的 md-chip-template 元素作为 md-chips 来实现。<mat-chip-list> 将值列表显示为单独的、键盘可访问的芯片。

未样式化的芯片

默认情况下，内容设计样式在 <mat-chip> 中实现。对于任何带样式的芯片，请勿使用 <mat-basic-chip>。我们可以通过实现 CSS 来优化芯片外观。

<mat-basic-chip> 除了 mat-chip-class 之外，还获得 mat-basic-chip CSS 类。

选拔

芯片通过 selected 属性进行选择。可以通过在 <mat-chip-list> 上选择 select 来禁用它。

每当选择状态发生变化时，chipselectionchange 事件就会通过事件（选择更改）发出。

禁用的芯片

通过在芯片上实现 Disabled 属性，将禁用单个芯片。禁用后，芯片既不可选择也不可见。

芯片输入

MatChipInput 指令将与芯片列表一起使用，以简化两个组件之间的交互。该指令将芯片特定的行为添加到 <mat-form-field> 中的输入元素中，以添加和删除芯片。使用 MatChipInput，<input> 将放置在 chip-list 元素内或外。

芯片输入在 chip-list 元素内的示例。

app.component.html

app.component.ts

app.component.css

输出

芯片输入放置在 chip-list 元素外的示例。

带有自动完成功能的芯片输入在 chip-list 元素内的示例。

app.component.html

app.component.css

输出

键盘交互

用户可以使用箭头键移动芯片，并使用空格键选择/取消选择它们。单击也会将焦点放在芯片上，确保键盘导航从适当的芯片开始。

导向

如果你希望列表中的芯片垂直堆叠，而不是水平堆叠，你可以应用 mat-chip-list-stacked 类，以及 aria-orientation="vertical" 属性

指定全局配置默认值

可以使用 MAT_CHIPS_DEFAULT_OPTIONS 注入令牌指定芯片模块的默认选项。

主题化

可以通过使用 color 属性来更改 <mat-chip> 的选定颜色。默认情况下，芯片使用中性背景颜色，具体取决于当前主题（浅色或深色）。它可以更改为“Primary”、“accent”或“Warn”。

可访问性

芯片列表的行为就像一个 role = "listbox"，每个芯片都有一个 role = "option"。 芯片输入必须包含一个占位符，或者通过 area-label 或 area-labeledby 赋予有意义的标签。