在现代 Web 设计中，标签成为了一项必备的元素。标签能够提供有用的指示并使内容更易于理解和搜索。Material Design 中，Chip 是一种常用的元素，用于创建小型且易于识别的交互式元素，特别适用于标签和过滤器。
Chip 的基本使用
要在 Material Design 中使用 Chip，你需要使用 mdc-chip 类名和必需的 aria-label 属性来创建一个带有链接效果的 Chip：
<a href="#" class="mdc-chip" aria-label="Chip example"> Chip example </a>
Chip 也可以使用带有脚本动作的 js 来工作。你可以使用 js 对 Chip 进行一些基本的交互，例如添加/删除标记、激活/禁用标记等。
Chip 的不同样式
Material Design 提供了几种不同类型的 Chip 样式，适合不同的设计需要。
线框式
线框式 Chip 在用户点击或激活时展开，相当于传统标签的效果。要创建一个线框式 Chip，请使用 mdc-chip--outlined 类：
<a href="#" class="mdc-chip mdc-chip--outlined" aria-label="Outlined chip example"> Outlined chip example </a>
可删除的
可删除的 Chip 允许用户删除已选择的标记。要创建一个可删除的 Chip，请使用 mdc-chip--delete 类，并在内部添加一个包含删除图标的 <button> 元素：
<a href="#" class="mdc-chip mdc-chip--outlined mdc-chip--delete" aria-label="Deletable chip example"> Deletable chip example <button class="mdc-chip__icon mdc-chip__icon--trailing material-icons" title="删除标记" tabindex="-1">cancel</button> </a>
多彩样式
如果你想让你的标记看起来更加生动鲜明，可以使用多彩样式。要创建一个多彩样式的 Chip，请使用 mdc-chip--selected 类和一个包含你想要的颜色的自定义样式表：
<a href="#" class="mdc-chip mdc-chip--selected" aria-label="Custom chip example"> Custom chip example </a>
.mdc-chip--selected {
background-color: #ff572d;
color: #fff;
}Chip 的其他交互
Chip 还支持其他一些交互。例如，禁用/启用 Chip 的最佳做法是将禁用状态设置为 CSS 类 mdc-chip--disabled。
Chip 还接受一些与交互相关的事件，例如click 和 keydown 等，这些都可以使用 JavaScript 进行操作。
总结
Chip 是 Material Design 中非常重要的一种元素，特别适合于创建标签和过滤器。你可以根据自己的需要选择不同的样式，从而使 Chip 更加灵活多样。同时，你还需要在 JavaScript 或其他脚本动作中添加交互和事件处理，以实现更多的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cddb1cb5eee0b5255cc210