佔位符

使用元件或頁面的載入佔位符，表示某些內容可能仍在載入中。

在此頁面

關於

佔位符可用於提升應用程式的體驗。它們僅使用 HTML 和 CSS 建置，表示您不需要任何 JavaScript 來建立它們。不過，您需要一些自訂 JavaScript 來切換它們的能見度。它們的外觀、顏色和大小可以使用我們的實用程式類別輕鬆自訂。

範例

在以下範例中，我們採用一個典型的卡片元件，並重新建立它，並套用佔位符來建立「載入中卡片」。這兩個元件的大小和比例相同。

卡片標題

一些快速範例文字，用於建立卡片標題，並構成卡片內容的大部分。

前往某處

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

運作方式

使用 .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 程式碼來切換佔位符的狀態，並告知 AT 使用者更新事項。

寬度

您可以透過網格欄位類別、寬度工具程式或內嵌樣式來變更 width。

html

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

顏色

預設情況下，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>

大小

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

動畫

使用 .placeholder-glow 或 .placeholder-wave 為 placeholder 加入動畫，以更清楚地傳達某個東西正在主動載入的印象。

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 變數

scss/_variables.scss

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