標示

標示將 Foundation 5 中的面板和警示合併成一個通用容器元件。

基礎

標示只是一個套用 .callout 類別的元素。您可以在其中放置任何類型的內容。

<div class="callout">
  <h5>This is a callout.</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

這是標示。

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

著色

標註可以使用 .secondary、.primary、.success、.warning 或 .alert 類別著色。標註內的連結會套用與標註相同的顏色。

在影片中觀看此部分

<div class="callout secondary">
  <h5>This is a secondary callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

這是次要標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

這是主要標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

這是成功標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

這是警告標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

這是警示標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

大小

標註可以使用 .small 和 .large 類別調整大小。這些類別會分別縮小和放大內容周圍的內距。

<div class="callout small">
  <h5>This is a small callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

<div class="callout large">
  <h5>This is a large callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

這是小型標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

這是大型標註

它具有容易覆寫的視覺樣式，且適當地低調。

單獨行動很危險，請帶上這個。

製作可關閉標註

將標註與關閉按鈕元件和 data-closable 屬性配對，以建立可關閉的警示方塊。

在影片中觀看此部分

任何元素都可以用作關閉觸發器，而不仅仅是關閉按鈕。在標註內，將屬性 data-close 加入任何元素，即可將其變成關閉觸發器。

使用 data-closable 屬性時，你可以選擇將 Motion UI 類別加入屬性，以變更關閉動畫。如果未加入類別，外掛程式會預設為 jQuery 的 .fadeOut() 函式。

<div class="callout alert" data-closable>
  <h5>This is Important!</h5>
  <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
  <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="callout success" data-closable="slide-out-right">
  <h5>This a friendly message.</h5>
  <p>And when you're done with me, I can be closed using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

這很重要！

但是當你讀完後，請按一下角落的關閉按鈕，關閉此警示。

我使用預設的 data-closable 參數，並僅淡出。

這是一則友善訊息。

當你用完我時，可以使用 Motion UI 動畫關閉我。

Sass 參考

變數

此元件的預設樣式可以使用專案設定檔中的這些 Sass 變數自訂。

名稱	類型	預設值	說明
`$callout-background`	顏色	`$white`	預設背景顏色。
`$callout-background-fade`	數字	`85%`	標註背景的預設淡出值。
`$callout-border`	清單	`1px solid rgba($black, 0.25)`	標註的預設邊框樣式。
`$callout-margin`	數字	`0 0 1rem 0`	標註的預設底部邊距。
`$callout-sizes`	對應	`small: 0.5rem default: 1rem 大型：3rem`	標註內距大小。
`$callout-font-color`	顏色	`$body-font-color`	標註預設字型顏色。
`$callout-font-color-alt`	顏色	`$body-background`	標註預設字型顏色（如果標註有深色背景）。
`$callout-radius`	顏色	`$global-radius`	標註預設邊框圓角。
`$callout-link-tint`	數字或布林值	`30%`	設定用於彩色彩色面板內連結的色調。設為 `false` 以停用此功能。

混合

我們使用這些混合建立此元件的最終 CSS 輸出。您可以自己使用混合，從我們的元件建立自己的類別結構。

callout-base

@include callout-base;

加入標註的基本樣式，包括內距和外距。

callout-style

@include callout-style($color);

使用單一色彩作為基準，為標註產生快速樣式。

參數	類型	預設值	說明
`$color`	顏色	`$callout-background`	要使用的色彩。

callout

@include callout($color);

加入標註的樣式。

參數	類型	預設值	說明
`$color`	顏色	`$callout-background`	要使用的色彩。