プレースホルダー

コンポーネントまたはページで、読み込み中であることを示すために、ローディングプレースホルダーを使用します。

このページの内容

概要

プレースホルダーは、アプリケーションのユーザーエクスペリエンスを向上させるために使用できます。これらは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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

仕組み

プレースホルダーを作成するには、.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を変更できます。

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>

CSS

Sass変数

scss/_variables.scss

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