纸片

2018-05-26 01:57 更新

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

调用方式

纸片组件使用纯 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 定义纸片的删除按钮。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号