プレースホルダー Placeholders

コンポーネントやページにローディングプレースホルダー（スケルトンローダー）を使用して、まだ読み込み中である可能性があることを示します。

On this page

About

Placeholdersはアプリケーションのエクスペリエンスを向上させるために使用できます。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を設定します。要素内のテキストを置き換えたり、既存のコンポーネントに修飾クラスとして追加したりできます。

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

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"の使用は、要素をスクリーンリーダーに対して非表示にする必要があることのみを示します。プレースホルダーのローディング動作は、作成者が実際にプレースホルダースタイルをどのように使用するか、どのように更新を計画するかなどに依存します。プレースホルダーの状態を交換し、ATユーザーに更新を通知するには、いくつかの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 variables

scss/_variables.scss

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