纸片可以包含一张图片、一个短字符串等简洁的信息。
调用方式
纸片组件使用纯 CSS 编写,只需编写 HTML 代码即可生效。
相关资料
Material Design 纸片设计规范
样式
纯文本
![www.mdui.org - 纸片 - 纯文本](https://atts.w3cschool.cn/attachments/image/20170526/1495734124299012.png)
在线运行
含头像
![www.mdui.org - 纸片 - 含头像](https://atts.w3cschool.cn/attachments/image/20170526/1495734173769167.png)
在线运行
含文字图标
![www.mdui.org - 纸片 - 含文字图标](https://atts.w3cschool.cn/attachments/image/20170526/1495734223792610.png)
在线运行
含图标
![www.mdui.org - 纸片 - 含图标](https://atts.w3cschool.cn/attachments/image/20170526/1495734279275530.png)
在线运行
含关闭按钮
![www.mdui.org - 纸片 - 含关闭按钮](https://atts.w3cschool.cn/attachments/image/20170526/1495734323744457.png)
在线运行
图标颜色
![www.mdui.org - 纸片 - 图标颜色](https://atts.w3cschool.cn/attachments/image/20170526/1495734364164873.png)
在线运行
CSS 类名列表
类名 | 效果 |
.mdui-chip | 定义一个纸片组件。 |
.mdui-chip-title | 定义纸片的文本。 |
.mdui-chip-icon | 定义纸片的头像或图标。 |
.mdui-chip-delete | 定义纸片的删除按钮。 |
更多建议: