纸片可以包含一张图片、一个短字符串等简洁的信息。
调用方式
纸片组件使用纯 CSS 编写,只需编写 HTML 代码即可生效。
相关资料
Material Design 纸片设计规范
样式
纯文本

在线运行
含头像

在线运行
含文字图标

在线运行
含图标

在线运行
含关闭按钮

在线运行
图标颜色

在线运行
CSS 类名列表
类名 | 效果 |
.mdui-chip | 定义一个纸片组件。 |
.mdui-chip-title | 定义纸片的文本。 |
.mdui-chip-icon | 定义纸片的头像或图标。 |
.mdui-chip-delete | 定义纸片的删除按钮。 |
更多建议: