徽章

徽章是一个显示数字的基本组件。它对于标出未读项目的数量很有用。

基础知识

将 .badge 类添加到元素以创建徽章。在下面的示例中，我们使用的是 <span>，但任何标签都可以正常工作。

<span class="badge">1</span>

徽章通常用于描述页面上的另一个元素。要将两个元素绑定在一起，请为徽章指定一个唯一的 ID，并在主元素的 aria-describedby 属性中引用该 ID。

<h1 aria-describedby="messageCount">Unread Messages</h1>
<span class="badge" id="messageCount">1</span>

最后，对于使用屏幕阅读器的用户，内容本身可能需要更多上下文。您可以使用 .show-for-sr 类在徽章内添加额外的文本。

<span class="badge" id="messageCount">1 <span class="show-for-sr">unread message</span></span>

着色

添加颜色类以赋予徽章额外的含义。

观看视频中的这一部分

<span class="badge primary">1</span>
<span class="badge secondary">2</span>
<span class="badge success">3</span>
<span class="badge alert">A</span>
<span class="badge warning">B</span>

1 2 3 A B

自定义颜色

如果您使用的是 Sass 版本的 Foundation，则可以通过编辑设置文件中的 $badge-palette 映射来自定义徽章类。徽章调色板默认为 $foundation-palette。

如果您不需要默认调色板中的某些颜色，只需将它们从列表中删除即可。

$badge-palette: map-remove($foundation-palette, (
    primary,
    secondary
)) !default;

或者，您可以向默认调色板添加更多颜色。

$badge-palette: map-merge($foundation-palette, (
    purple: #bb00ff
)) !default;

或者，您可以定义自己的自定义徽章调色板。

$badge-palette: (
    black: #000000,
    red: #ff0000,
    purple: #bb00ff
) !default;

文本颜色

每个徽章类的文本颜色由 $badge-color 或 $badge-color-alt 决定，以对比度更高的设置变量为准。

默认设置符合 WCAG 2.0 级别 AA 对比度要求。更改颜色变量时，请务必[检查对比度](https://webaim.org/resources/contrastchecker/)。要使所有徽章具有相同的颜色文本，请将 $badge-color 和 $badge-color-alt 设置为相同的值 - 但请注意，这样做可能会降低可访问性。

图标

可以使用图标代替文本。我们在这里使用的是 Foundation 图标字体，但任何图标字体或基于图像的图标都可以正常工作。

观看视频中的这一部分

<span class="badge secondary"><i class="fi-share"></i></span>
<span class="badge success"><i class="fi-check"></i></span>
<span class="badge warning"><i class="fi-wrench"></i></span>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$badge-background`	颜色	`$primary-color`	徽章的默认背景颜色。
`$badge-color`	颜色	`$white`	徽章的默认文本颜色。
`$badge-color-alt`	颜色	`$black`	徽章的备用文本颜色。
`$badge-palette`	映射	`$foundation-palette`	着色类。要在 CSS 中输出的类映射，例如 `.secondary`、`.success` 等。
`$badge-padding`	数字	`0.3em`	徽章内的默认填充。
`$badge-minwidth`	数字	`2.1em`	徽章的最小宽度。
`$badge-font-size`	数字	`0.6rem`	徽章的默认字体大小。

混入

我们使用这些混入来构建此组件的最终 CSS 输出。您可以自己使用这些混入来从我们的组件中构建自己的类结构。

badge

@include badge;

生成徽章的基本样式。