プレースホルダー

コンポーネントまたはページの読み込みプレースホルダーを使用して、何かがまだ読み込まれている可能性があることを示します。

このページでは

約

プレースホルダーを使用して、アプリケーションのエクスペリエンスを向上させることができます。これらは HTML と CSS のみで構築されているため、JavaScript を使用して作成する必要はありません。ただし、可視性を切り替えるにはカスタム JavaScript が必要です。それらの外観、色、およびサイズは、ユーティリティクラスを使用して簡単にカスタマイズできます。

例

以下の例では、典型的なカードコンポーネントを使用して、プレースホルダーを適用して再作成し、「読み込みカード」を作成しています。サイズとプロポーションは 2 つの間で同じです。

カードのタイトル

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なテキストの例。

どこかへ行きます

<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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

使い方

.placeholderクラスとグリッド列クラス (例: ) を使用してプレースホルダーを作成し、.col-6を設定しwidthます。要素内のテキストを置き換えたり、モディファイアクラスとして既存のコンポーネントに追加したりできます。

.btns viaに追加のスタイルを適用::beforeして、heightが尊重されるようにします。必要に応じてこのパターンを他の状況に拡張するか 、要素内に a を追加して、実際のテキストがその場所にレンダリングされるときの高さを反映することができます。

html

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

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

onlyの使用は aria-hidden="true"、スクリーンリーダーに対して要素を非表示にする必要があることを示します。プレースホルダーの 読み込み動作は、作成者がプレースホルダースタイルを実際にどのように使用するか、どのように更新を計画しているかなどによって異なります。プレースホルダーの状態を交換し、AT ユーザーに更新を通知するには、JavaScript コードが必要になる場合があります。

幅

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

html

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

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

サス

変数

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