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 Lite（MDL）中一个轻量级的纯 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="#" class="mdl-badge">This link has a badge.</a>

第 3 步：添加data-badge属性并赋予带引号的字符串值，这就是 badge 中要显示的内容：

<a href="#" class="mdl-badge"><a href="#" class="mdl-badge"><a href="#">This link is followed by a badge.</a> <span class="mdl-badge"><a href="#" class="mdl-badge"><a href="#" class="mdl-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-button（MDL 按钮）内部时，源码还做了专门的位置微调（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 的背景与文字分别取自 MDL 调色板的强调色（accent）及其对比色，因此当你更换主题的 accent 颜色时，badge 会自动跟随换色，无需任何额外改动。

实战扩展：图标上的四种 badge 组合

仓库的 src/badge/snippets 目录提供了四组带-demo.html演示包装的片段，展示了 badge 与 Material Icons 图标、文本的四种交叉组合，是比 README 更进一步的真实场景参考：

• 数字 badge + 文本（badge-on-text-text.html）：最基础的形式，<span class="mdl-badge" contenteditable="false">【免费下载链接】material-design-liteMaterial Design Components in HTML/CSS/JS项目地址: https://gitcode.com/gh_mirrors/ma/material-design-lite