基于 Material Design 3 和 Web Components 的全新 mdui 2 现已发布，前往查看 mdui 2 开发文档。

标签

标签可以包含一张图片、一个短字符串等简洁的信息。

调用方式

标签组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

相关阅读

Material Design 设计规范：组件 - 标签

样式

纯文本

示例

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

含头像

示例

<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含文字图标

示例

<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含图标

示例

<div class="mdui-chip">
  <span class="mdui-chip-icon">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含关闭按钮

示例

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete">
    <i class="mdui-icon material-icons">cancel</i>
  </span>
</div>

图标颜色

示例

<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

CSS 类名列表

类名	说明
`.mdui-chip`	定义一个标签组件。
`.mdui-chip-title`	定义标签的文本。
`.mdui-chip-icon`	定义标签的头像或图标。
`.mdui-chip-delete`	定义标签的删除按钮。