プレースホルダー

Placeholders

コンポーネントやページのローディング・プレースホルダーを使用して、ローディング中であることを示します。

項目

概要

プレースホルダーは、アプリケーションの体験を向上させるために使用できます。プレースホルダーはHTMLとCSSだけで作られているので、JavaScriptは必要ありません。ただし、表示/非表示を切り替えるにはカスタムJavaScriptが必要です。外観、色、サイズはユーティリティクラスで簡単にカスタマイズできます。

例

下の例では、典型的なカード・コンポーネントにプレースホルダを適用して「ローディング・カード」を作成します。サイズと比率は両者で同じです。

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"></a>
  </div>
</div>

基礎知識

.placeholderクラスでプレースホルダを作成し、グリッドカラムクラス（例：.col-6）でwidthを設定します。これらは要素内のテキストを置き換えたり、既存のコンポーネントに修飾クラスとして追加することができます。

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

html

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

<a class="btn btn-primary disabled placeholder col-4"></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>

カラー

デフォルトでは、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;