Material Design LiteMDLChip 组件完整实战指南从基础结构到源码级定制【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite导读Chip纸片/标签是 Material Design LiteMDL中一个轻量、可交互的小型界面元素常用于联系人、标签、规则、图标与照片等紧凑信息的展示与操作。本文将基于 src/chip/README.md 的系统说明结合仓库中 src/chip/_chip.scss 的实现细节与 src/chip/snippets/ 下的五类可直接运行的示例片段带你从零掌握 Chip 的标记结构、可删除deletable与联系人contact两种典型形态并深入理解其尺寸、配色与焦点/激活状态的底层原理最终能够独立完成 Chip 的接入与视觉定制。一、Chip 是什么组件定位与典型场景Chip 在 Material Design 体系中是一种小而精的交互元素它以紧凑的圆角胶囊形态呈现一段信息同时可以承载删除点击触发动作等交互能力。在 MDL 项目中Chip 组件由纯 HTML/CSS 实现组件源码中不包含 JavaScript 逻辑这意味着你只需要引入正确的样式即可在任意页面中使用它。从实际使用场景看Chip 非常适合以下需求联系人展示在邮件、即时通讯或协作应用中显示收件人头像与姓名可带删除按钮以便移除收件人标签 / 过滤器展示筛选条件或内容标签支持一键移除规则 / 提示信息以小块形式展示简短的规则说明或状态提示照片与图标在搜索建议、搜索结果等场景中用小尺寸头像或图标配合文字呈现条目。由于 Chip 完全由 CSS 驱动它天然兼容已有的布局体系可与 grid、list 等组件自由组合。二、启用 Chip 组件引入样式的前置条件Chip 的样式定义位于 src/chip/_chip.scss。在主样式入口 src/material-design-lite.scss 中通过如下语句被统一引入import chip/chip;因此在项目中使用 Chip 有两种方式全量引入直接引入编译产物material.css或material.min.css此时 Chip 样式随整个 MDL 库一并生效按需引入如果你使用 SCSS 构建流程可以只import chip/chip同时确保其依赖的../variables与../mixins含阴影 mixin也已导入因为 src/chip/_chip.scss 顶部明确import ../variables与import ../mixins。从源码结构看Chip 组件目录不包含.js文件即该组件为纯样式组件无需注册任何MDLComponent或初始化代码引入样式即可直接使用。三、四步搭建一个 MDL Chip核心标记结构Chip 的 HTML 结构遵循外层容器 内层内容容器的嵌套模型。根据 src/chip/README.md 的说明完整引入一个 Chip 需要依次完成以下四步。第 1 步创建容器元素为 Chip 创建一个容器元素。通常使用span或div但任意容器元素都可以正常工作。如果需要交互能力例如点击触发动作应改用button或为容器添加tabindex属性以支持键盘聚焦。span /span第 2 步添加文本包装与 MDL 类在容器上添加mdl-chip类内部用mdl-chip__text包装文本内容。这是 Chip 的最小完整形态仅含文字span classmdl-chip span classmdl-chip__textChip Text/span /span仓库中 src/chip/snippets/basic.html 即是最基础形态的直接体现!-- Basic Chip -- span classmdl-chip span classmdl-chip__textBasic Chip/span /span第 3 步添加删除图标Deletable Chip对于可删除的 Chip在文本容器之后添加删除图标。删除动作元素可以是a、button也可以是非交互标签如span并为其添加mdl-chip__action类。图标使用 Material Icons 的cancel图标span classmdl-chip span classmdl-chip__textChip Text/span a href# classmdl-chip__actioni classmaterial-iconscancel/i/a /span需要说明的是README 中该示例未显式添加mdl-chip--deletable修饰类而仓库配套片段 src/chip/snippets/deletable.html 给出了更完整、推荐的做法——在容器上同时添加mdl-chip--deletable类使删除按钮与文本之间获得正确的间距见下文源码级解析!-- Deletable Chip -- span classmdl-chip mdl-chip--deletable span classmdl-chip__textDeletable Chip/span button typebutton classmdl-chip__actioni classmaterial-iconscancel/i/button /span第 4 步添加联系人图标Contact Chip联系人形态的 Chip 需要在容器上添加mdl-chip--contact类并在文本之前增加一个联系人图标容器图标容器添加mdl-chip__contact类。联系人容器通常使用img标签放置照片也可以放置文字或其它内容需辅以少量自定义 CSSspan classmdl-chip span classmdl-chip__contact mdl-color--teal mdl-color-text--whiteA/span span classmdl-chip__textChip Text/span a href# classmdl-chip__actioni classmaterial-iconscancel/i/a /span在上述示例中联系人容器放置的是文字 A通过 MDL 的配色工具类mdl-color--teal青色背景与mdl-color-text--white白色文字快速获得圆形字母头像效果无需编写任何自定义样式。四、可直接运行的五个参考示例src/chip/snippets/ 目录按形态划分了五类最小可运行片段覆盖了 README 描述的全部组合建议直接对照使用片段文件形态说明结构要点basic.html基础 Chipmdl-chipmdl-chip__textbutton.html按钮型 Chip外层使用button typebutton classmdl-chip可点击contact.html联系人 Chipmdl-chip--contactmdl-chip__contact字母头像mdl-chip__textdeletable.html可删除 Chipmdl-chip--deletablemdl-chip__textbutton删除按钮deletable-contact.html可删除联系人 Chipmdl-chip--contact mdl-chip--deletableimg头像 文本 a删除按钮其中 deletable-contact.html 是全部能力叠加的完整示例联系人头像使用img标签并引用仓库模板图片!-- Deletable Contact Chip -- span classmdl-chip mdl-chip--contact mdl-chip--deletable img classmdl-chip__contact src/templates/dashboard/images/user.jpg/img span classmdl-chip__textDeletable Contact Chip/span a href# classmdl-chip__actioni classmaterial-iconscancel/i/a /span进阶示例用背景图替代img做联系人头像README 还给出了一个实用技巧当联系人内容不是标准图片文件、而是需要以 CSS 背景图方式呈现时可以用一个span作为联系人容器配合少量自定义 CSS 将背景图裁剪为圆形。示例同时演示了把整个 Chip 作为button使用使其具备完整的按钮交互语义style .demo-chip .mdl-chip__contact { background-image: url(./path/to/image); background-size: cover; } /style button classmdl-chip demo-chip span classmdl-chip__contactnbsp;/span span classmdl-chip__textChip Text/span a href# classmdl-chip__actioni classmaterial-iconscancel/i/a /button这里的关键点在于mdl-chip__contact容器本身是圆形的见下文源码解析background-size: cover可保证图片铺满且不变形nbsp;用于撑起容器内部高度使背景图正常渲染。五、CSS 类速查表类名、作用与使用约束以下为 src/chip/README.md 中列出的全部 MDL Chip 类以及其作用与约束MDL Class作用备注mdl-chip将元素定义为 MDL Chip 容器必须添加在外层容器上mdl-chip--contact将 MDL Chip 定义为联系人风格可选添加在外层容器上mdl-chip__text将元素定义为 Chip 的文本容器必须添加在内层文本容器上mdl-chip__action将元素定义为 Chip 的动作删除容器若存在动作元素则必须添加在其上mdl-chip__contact将元素定义为 Chip 的联系人容器仅当外层容器带有mdl-chip--contact时才需要添加在内层联系人容器上补充说明虽然 README 的类名表格未单列mdl-chip--deletable但从 src/chip/_chip.scss 中可以看到该修饰类确实存在于实现中--deletable { padding-right: 4px; }其作用是为删除按钮腾出右侧留白。README 表格与源码实现互为补充完整类名体系为mdl-chip、mdl-chip--contact、mdl-chip--deletable、mdl-chip__text、mdl-chip__action、mdl-chip__contact。六、源码级解析Chip 的尺寸、配色与交互状态Chip 的全部视觉规则集中在 src/chip/_chip.scss而相关设计变量定义在 src/_variables.scss。理解这些变量即可精确掌控 Chip 的观感。6.1 关键设计变量变量默认值作用$chip-height32pxChip 整体高度同时用于计算圆角半径$chip-height / 2与联系人圆形容器的边长$chip-font-size13px文本与删除图标的字号$chip-bg-colorrgb(222, 222, 222)默认背景色浅灰$chip-bg-active-colorrgb(214, 214, 214)激活按下状态背景色这些变量均带有!default标记见 src/_variables.scss意味着你可以在引入 MDL 之前重新定义同名变量从而覆盖默认值实现全局换肤。6.2 视觉构成拆解从 src/chip/_chip.scss 的实现可以看到容器.mdl-chipdisplay: inline-block使其可嵌入任意文本流height: 32px、line-height: 32px保证内容垂直居中padding: 0 12px提供水平内边距border-radius: 32px / 2 16px形成胶囊圆角font-size: 0用于消除内联元素间的空白间隙white-space: nowrap防止文本换行。文本.mdl-chip__text恢复font-size: 13px并通过vertical-align: middle与display: inline-block实现文本在胶囊中的垂直居中。动作.mdl-chip__action固定为24px × 24px的方形区域opacity: 0.54呈现半透明图标cursor: pointer提示可点击且去除了默认的边框、轮廓与文本装饰border: none; outline: none; text-decoration: none;与 Material 图标配合形成干净的删除按钮。联系人.mdl-chip__contactwidth/height: 32px、border-radius: 16px构成一个与 Chip 等高的正圆margin-right: 8px在头像与文本间留出间距overflow: hidden确保头像图片被裁剪为圆形line-height: 32px让单字符字母头像垂直居中。修饰类--deletable将右内边距收窄为4px为删除按钮留出空间--contact将左内边距置零因头像本身已提供视觉起点。6.3 交互状态焦点与激活反馈Chip 作为交互元素在 src/chip/_chip.scss 中定义了两个状态样式:focus { outline: 0; include shadow-2dp(); } :active { background-color: $chip-bg-active-color; }:focus移除浏览器默认轮廓改用 MDL 的shadow-2dp阴影定义于 src/_mixins.scss作为聚焦反馈——这正是前面提到需要交互时使用button或添加tabindex的样式层原因只有可聚焦元素才能触发该反馈:active按下时背景色由默认灰加深为rgb(214, 214, 214)给出即时按压反馈。这两点说明Chip 的交互样式是为可聚焦/可点击容器设计的。若你的 Chip 只是静态展示如只读标签使用span即可若需点击交互务必选用button或添加tabindex才能获得完整的键盘可访问性与视觉反馈。七、实战定制指南在掌握结构与源码后可围绕以下方向对 Chip 进行定制均无需改动仓库文件仅在你的项目样式中覆盖即可改变尺寸重新定义$chip-height如40pxChip 高度、圆角与联系人圆形头像会自动同步缩放若仅在单个场景定制也可直接覆盖.mdl-chip { height: 40px; line-height: 40px; border-radius: 20px; }。改变配色覆盖$chip-bg-color与$chip-bg-active-color或直接为容器添加背景色联系人头像的颜色可继续借助 MDL 的mdl-color--*/mdl-color-text--*工具类如 README 示例中的 teal 背景。自定义联系人内容联系人容器既支持img照片也支持span配合background-image背景图或纯文字字母头像前两者已在 README 示例与片段中得到验证。选择删除动作元素mdl-chip__action可挂载在a、button或span上交互式场景建议使用button typebutton如 deletable.html以避免表单提交等副作用并配合 JavaScript 实现真正的删除逻辑——由于 Chip 组件本身不提供 JS 行为删除动作的点击处理需要你自行绑定。八、小结MDL Chip 是一个纯 CSS、零依赖、开箱即用的轻量组件你只需要记住外层容器mdl-chip 内层文本mdl-chip__text可选mdl-chip--contact联系人形态与mdl-chip--deletable可删除形态这一结构模型即可组合出基础、按钮、联系人、可删除、可删除联系人等全部形态。其样式全部由 src/chip/_chip.scss 与 src/_variables.scss 中的设计变量驱动无论是修改胶囊高度、圆角还是定制聚焦阴影与按压配色都有清晰的扩展入口。配合 src/chip/snippets/ 下的五个示例片段你可以快速在自己的页面中落地 Chip并依据本文的源码解析将其打磨成符合产品规范的自定义组件。【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考