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>
主要標籤 次要標籤 成功標籤 警示標籤 警告標籤

自訂顏色

如果你使用 Foundation 的 Sass 版本，你可以透過編輯設定檔中的 $label-palette 地圖來自訂標籤類別。標籤調色盤預設為 $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 輸出。你可以自行使用混入，從我們的元件建構你自己的類別結構。

標籤

@include label;

為標籤產生基礎樣式。