Material Design Lite组件之小纸片

1.介绍

Material Design Lite（MDL）小纸片是一个小型的互动元件。 小纸片通常用于联系人，文本，规则，图标和照片。

2.配置选项

类名	效果	其他
mdl-chip	定义一个元素为MDL小纸片组件	必需
mdl-chip--contact	在小纸片内设置衔接	可选
mdl-chip__text	定义小纸片文本内容	内部文本容器必需
mdl-chip__action	定义小纸片行为	内部行为容器必需
mdl-chip__contact	定义小纸片内部衔接的容器	如果外部容器mdl-chip--contact存在则必需

3.应用举例

3.1.基本样式、含删除图标样式和按钮样式

<!-- Basic Chip -->
<span class="mdl-chip">
    <span class="mdl-chip__text">Basic Chip</span>
</span><!-- Deletable Chip -->
<span class="mdl-chip mdl-chip--deletable">
    <span class="mdl-chip__text">Deletable Chip</span>
    <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
</span><!-- Button Chip -->
<button type="button" class="mdl-chip">
    <span class="mdl-chip__text">Button Chip</span>
</button>

3.2.衔接样式和含删除图标的删除样式

<!-- Contact Chip -->
<span class="mdl-chip mdl-chip--contact">
    <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
    <span class="mdl-chip__text">Contact Chip</span>
</span>
<!-- Deletable Contact Chip -->
<span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
    <img class="mdl-chip__contact" src="/templates/dashboard/images/user.jpg"></img>
    <span class="mdl-chip__text">Deletable Contact Chip</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>