menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

纸片

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

调用方式

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

样式

纯文本

Example
Example Chip
<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

含头像

Example
Example Chip
<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含文字图标

Example
A Example Chip
<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含图标

Example
face Example Chip
<div class="mdui-chip">
  <span class="mdui-chip-icon">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

含关闭按钮

Example
Example Chip cancel
<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete">
    <i class="mdui-icon material-icons">cancel</i>
  </span>
</div>

图标颜色

Example
face Example Chip
<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

CSS 类名列表

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