codecamp

纸片

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

调用方式

纸片组件使用纯 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，免费阅读超1000+编程语言教程
取消
确定
目录

开始使用

样式

组件

JavaScript 插件

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }