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>