Foundation for Sites6.8.1 更新日志
组件列表

标签

标签是一种有用的内联样式，可以放到正文中以突出显示某些部分或附加元数据。 例如，您可以附加一个标签来注明内容的更新时间。

基础知识

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

观看视频中的这部分内容

edit on codepen button 
<span class="label">Default Label</span>
默认标签

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

<p aria-describedby="emailLabel">Re: re: re: you won't believe what's in this email!</p>
<span class="label" id="emailLabel">High Priority</span>

如果一个元素由多个标签描述，请在 aria-describedby 中放置多个 ID。

<p aria-describedby="emailLabel1 emailLabel2">Re: re: re: you won't believe what's in this email!</p>
<span class="label" id="emailLabel1">High Priority</span>
<span class="label" id="emailLabel2">Unread</span>

着色

添加颜色类以赋予标签额外的含义。

观看视频中的这部分内容

edit on codepen button 
<span class="label primary">Primary Label</span>
<span class="label secondary">Secondary Label</span>
<span class="label success">Success Label</span>
<span class="label alert">Alert Label</span>
<span class="label warning">Warning Label</span>
主要标签 次要标签 成功标签 警告标签 警告标签

自定义颜色

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

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

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

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

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

或者，您可以定义自己的自定义标签调色板。

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

文字颜色

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

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

图标

可以将图标放入标签中。 我们在这里使用的是 Foundation 图标字体，但任何图标字体或基于图像的图标都可以正常工作。

edit on codepen button 
<span class="label alert"><i class="fi-x-circle"></i> Alert Label</span>
<span class="label warning"><i class="fi-x"></i> Warning Label</span>
<span class="label"><i class="fi-widget"></i> Default Label</span>
警告标签 警告标签 默认标签

Sass 参考

变量

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

名称类型默认值说明
$label-background 颜色 $primary-color

标签的默认背景颜色。
$label-color 颜色 $white

标签的默认文本颜色。
$label-color-alt 颜色 $black

标签的备用文本颜色。
$label-palette 映射 $foundation-palette

着色类。要在 CSS 中输出的类的映射，例如 .secondary、.success 等。
$label-font-size 数字 0.8rem

标签的默认字体大小。
$label-padding 数字 0.33333rem 0.5rem

标签内的默认填充。
$label-radius 数字 $global-radius

标签的默认半径。

混合

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

label

@include label;

生成标签的基本样式。