Material Design Lite Badge 组件实战从 contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite导读Badge角标是 Material Design LiteMDL中一个轻量级的纯 CSS 通知组件用来在链接、图标或按钮旁以一个小圆点形式展示数字或字符提示这里有额外信息或共有多少条。本文将基于 src/badge/README.md 与 src/badge/_badge.scss 源码完整讲解 badge 的三种引入步骤、四种典型示例、全部配置选项并深入其 SCSS 实现与主题变量帮助你掌握从写一个角标到按需定制角标的完整能力。Badge 是什么屏上通知元素MDL 的 badge 组件是一个屏上通知元素它由一个小圆组成通常包含数字或其他字符出现在另一个对象链接、图标、按钮、文字附近。它的作用有两层通知告诉用户某个对象还关联着额外的内容计数告诉用户额外内容有多少。典型应用场景包括新消息通知旁边跟随一个显示未读消息数的 badge购物车中还有未结算商品提醒附带显示购物车商品数量的 badge加入讨论按钮旁边附带显示当前参与讨论人数的 badge。从使用意图上看badge 几乎总是放在链接附近方便用户点击进入 badge 所提示的附加信息但 badge 本身是否属于链接的一部分取决于你的设计意图——这一点在后面的示例中可以看到两种做法。由于 badge 是 UI 中相对较新的元素其设计与摆放方式直接影响整体用户体验MDL 通过mdl-badge类与data-badge属性提供了统一的实现方式。三步快速上手按照官方文档引入一个 badge 组件只需要三步全程无需 JavaScript第 1 步编写一个a锚点/链接或span元素带上你需要的任何属性与内容a href#This link has a badge./a第 2 步在class属性中加入 MDL 类mdl-badge多个类之间用空格分隔a href# classmdl-badgeThis link has a badge./a第 3 步添加data-badge属性并赋予带引号的字符串值这就是 badge 中要显示的内容a href# classmdl-badge>a href# classmdl-badge>a href#This link is followed by a badge./a span classmdl-badge>a href# classmdl-badge>a href# classmdl-badge mdl-badge--no-background>[data-badge]:after { content: attr(data-badge); /* ... */ }同时:not([data-badge])时会把margin-right重置为auto确保未加data-badge的元素不会产生额外留白。2. Flex 布局实现内容居中README 提到data-badge的值在 badge 中居中这一行为来自:after伪元素上的 flex 声明display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;3. 绝对定位挂在容器右上角元素本身position: relative并预留右侧边距margin-right: $badge-size $badge-padding伪元素则用绝对定位放在右上角position: absolute; top: -($badge-size / 2); right: -($badge-size $badge-padding);当 badge 位于.mdl-buttonMDL 按钮内部时源码还做了专门的位置微调top: -10px; right: -5px;这是从源码结构中可以看出的一个隐藏适配细节。4. 圆形外观与文字样式伪元素固定为 22px 的正圆width: $badge-size; height: $badge-size; border-radius: 50%使用首选字体族$preferred_font、font-weight: 600加粗、font-size: $badge-font-size并套用强调色背景与对比色文字。主题变量定制不改代码也能换肤badge 的所有尺寸与配色都抽取为 SCSS 变量集中在 src/_variables.scss。这意味着在使用 SCSS 定制构建时你可以直接覆盖这些变量来改变 badge 的全局外观变量默认值作用$badge-font-size12pxbadge 内文字字号$badge-color强调色对比色$color-accent-contrastbadge 文字颜色$badge-color-inverse强调色$color-accent无背景模式下的文字颜色$badge-background强调色$color-accentbadge 圆形背景色$badge-background-inverse对比色 20% 透明度rgba($color-accent-contrast, 0.2)无背景模式下的底色$badge-size22px圆形直径$badge-padding2pxbadge 与容器之间的间距$badge-overlap12px--overlap模式下的重叠量默认情况下badge 的背景与文字分别取自 MDL 调色板的强调色accent及其对比色因此当你更换主题的 accent 颜色时badge 会自动跟随换色无需任何额外改动。实战扩展图标上的四种 badge 组合仓库的 src/badge/snippets 目录提供了四组带-demo.html演示包装的片段展示了 badge 与 Material Icons 图标、文本的四种交叉组合是比 README 更进一步的真实场景参考数字 badge 文本badge-on-text-text.html最基础的形式span classmdl-badge contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Material Design Lite Badge 组件实战：从 data-badge 属性到样式定制的完整指南
Material Design Lite Badge 组件实战从 contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite导读Badge角标是 Material Design LiteMDL中一个轻量级的纯 CSS 通知组件用来在链接、图标或按钮旁以一个小圆点形式展示数字或字符提示这里有额外信息或共有多少条。本文将基于 src/badge/README.md 与 src/badge/_badge.scss 源码完整讲解 badge 的三种引入步骤、四种典型示例、全部配置选项并深入其 SCSS 实现与主题变量帮助你掌握从写一个角标到按需定制角标的完整能力。Badge 是什么屏上通知元素MDL 的 badge 组件是一个屏上通知元素它由一个小圆组成通常包含数字或其他字符出现在另一个对象链接、图标、按钮、文字附近。它的作用有两层通知告诉用户某个对象还关联着额外的内容计数告诉用户额外内容有多少。典型应用场景包括新消息通知旁边跟随一个显示未读消息数的 badge购物车中还有未结算商品提醒附带显示购物车商品数量的 badge加入讨论按钮旁边附带显示当前参与讨论人数的 badge。从使用意图上看badge 几乎总是放在链接附近方便用户点击进入 badge 所提示的附加信息但 badge 本身是否属于链接的一部分取决于你的设计意图——这一点在后面的示例中可以看到两种做法。由于 badge 是 UI 中相对较新的元素其设计与摆放方式直接影响整体用户体验MDL 通过mdl-badge类与data-badge属性提供了统一的实现方式。三步快速上手按照官方文档引入一个 badge 组件只需要三步全程无需 JavaScript第 1 步编写一个a锚点/链接或span元素带上你需要的任何属性与内容a href#This link has a badge./a第 2 步在class属性中加入 MDL 类mdl-badge多个类之间用空格分隔a href# classmdl-badgeThis link has a badge./a第 3 步添加data-badge属性并赋予带引号的字符串值这就是 badge 中要显示的内容a href# classmdl-badge>a href# classmdl-badge>a href#This link is followed by a badge./a span classmdl-badge>a href# classmdl-badge>a href# classmdl-badge mdl-badge--no-background>[data-badge]:after { content: attr(data-badge); /* ... */ }同时:not([data-badge])时会把margin-right重置为auto确保未加data-badge的元素不会产生额外留白。2. Flex 布局实现内容居中README 提到data-badge的值在 badge 中居中这一行为来自:after伪元素上的 flex 声明display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;3. 绝对定位挂在容器右上角元素本身position: relative并预留右侧边距margin-right: $badge-size $badge-padding伪元素则用绝对定位放在右上角position: absolute; top: -($badge-size / 2); right: -($badge-size $badge-padding);当 badge 位于.mdl-buttonMDL 按钮内部时源码还做了专门的位置微调top: -10px; right: -5px;这是从源码结构中可以看出的一个隐藏适配细节。4. 圆形外观与文字样式伪元素固定为 22px 的正圆width: $badge-size; height: $badge-size; border-radius: 50%使用首选字体族$preferred_font、font-weight: 600加粗、font-size: $badge-font-size并套用强调色背景与对比色文字。主题变量定制不改代码也能换肤badge 的所有尺寸与配色都抽取为 SCSS 变量集中在 src/_variables.scss。这意味着在使用 SCSS 定制构建时你可以直接覆盖这些变量来改变 badge 的全局外观变量默认值作用$badge-font-size12pxbadge 内文字字号$badge-color强调色对比色$color-accent-contrastbadge 文字颜色$badge-color-inverse强调色$color-accent无背景模式下的文字颜色$badge-background强调色$color-accentbadge 圆形背景色$badge-background-inverse对比色 20% 透明度rgba($color-accent-contrast, 0.2)无背景模式下的底色$badge-size22px圆形直径$badge-padding2pxbadge 与容器之间的间距$badge-overlap12px--overlap模式下的重叠量默认情况下badge 的背景与文字分别取自 MDL 调色板的强调色accent及其对比色因此当你更换主题的 accent 颜色时badge 会自动跟随换色无需任何额外改动。实战扩展图标上的四种 badge 组合仓库的 src/badge/snippets 目录提供了四组带-demo.html演示包装的片段展示了 badge 与 Material Icons 图标、文本的四种交叉组合是比 README 更进一步的真实场景参考数字 badge 文本badge-on-text-text.html最基础的形式span classmdl-badge contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考