徽章

徽章是一個顯示數字的基本元件。它對於標示未讀項目數量很有用。

基礎知識

將 .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

自訂色彩

如果您使用 Foundation 的 Sass 版本，您可以在設定檔中編輯 $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 輸出。您可以自行使用混合，從我們的元件建構自己的類別結構。

徽章

@include badge;

產生徽章的基本樣式。