佔位元素（Placeholders）

為您的元件或頁面使用載入佔位元素（骨架載入器），以指示某些內容可能仍在載入中。

本頁內容

關於（About）

佔位元素可用於增強您應用程式的體驗。它們僅使用 HTML 和 CSS 建構，這意味著您不需要任何 JavaScript 來建立它們。然而，您將需要一些自訂 JavaScript 來切換它們的可見性。它們的外觀、顏色和尺寸可以使用我們的通用類別輕鬆自訂。

範例（Example）

在下面的範例中，我們採用典型的卡片元件，並使用佔位元素重新建立它，以建立一個「載入中卡片」。兩者之間的尺寸和比例相同。

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

運作原理（How it works）

使用 .placeholder 類別和格線欄類別（例如 .col-6）建立佔位元素以設定 width。它們可以取代元素內的文字，或作為修飾類別加入到現有元件中。

我們透過 ::before 對 .btn 套用額外的樣式，以確保 height 被尊重。您可以根據需要將此模式擴展到其他情況，或在元素內加入   以反映實際文字呈現時的高度。

html

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

使用 aria-hidden="true" 只表示該元素應該對螢幕閱讀器隱藏。佔位元素的載入行為取決於作者實際如何使用佔位元素樣式、他們計劃如何更新內容等。可能需要一些 JavaScript 程式碼來切換佔位元素的狀態並通知輔助技術使用者更新。

寬度（Width）

您可以透過格線欄類別、寬度通用類別或行內樣式來改變 width。

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

顏色（Color）

預設情況下，placeholder 使用 currentColor。這可以用自訂顏色或通用類別覆寫。

html

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

尺寸（Sizing）

.placeholder 的尺寸基於父元素的排版樣式。使用尺寸修飾器自訂它們：.placeholder-lg、.placeholder-sm 或 .placeholder-xs。

html

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

動畫（Animation）

使用 .placeholder-glow 或 .placeholder-wave 為佔位元素加入動畫，以更好地傳達某些內容正在主動載入的感覺。

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

CSS

Sass 變數（Sass variables）

scss/_variables.scss

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;