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