阅读(4382) (0)

纸片

2017-05-26 01:40:15 更新

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

调用方式

纸片组件使用纯 CSS 编写,只需编写 HTML 代码即可生效。


相关资料

Material Design 纸片设计规范


样式

纯文本

www.mdui.org - 纸片 - 纯文本

在线运行


含头像

www.mdui.org - 纸片 - 含头像

在线运行


含文字图标

www.mdui.org - 纸片 - 含文字图标

在线运行


含图标

www.mdui.org - 纸片 - 含图标

在线运行


含关闭按钮

www.mdui.org - 纸片 - 含关闭按钮

在线运行


图标颜色

www.mdui.org - 纸片 - 图标颜色

在线运行


CSS 类名列表

 类名 效果
 .mdui-chip 定义一个纸片组件。
 .mdui-chip-title 定义纸片的文本。
 .mdui-chip-icon 定义纸片的头像或图标。
 .mdui-chip-delete 定义纸片的删除按钮。