プレースホルダ（Placeholders） v5.1.0新設

概要（About）

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

実例（Examples）v5.3.1設定変更

次の例では、一般的なカードコンポーネントを使用して、プレースホルダを適用して"ローディングカード"を作成。サイズと比率は2つの間で同じ。

見本

設定例

<div class="d-flex justify-content-around">
  <div class="card" style="width: 18rem;">
    <img src="..." alt="..." class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カードのタイトル</h5>
      <p class="card-text">カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。</p>
      <a href="#" class="btn btn-primary">カードのボタン</a>
    </div>
  </div>

  <div class="card" aria-hidden="true" style="width: 18rem;">
    <img src="..." alt="..." class="card-img-top">
    <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>
</div>

使い方（How it works）v5.3.1設定変更

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

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

見本

設定例

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

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

幅（Width）

width は、グリッド列クラス、幅ユーティリティ、インラインスタイルを経由して変更できる。

見本

設定例

グリッドクラスで設定<span class="placeholder col-6"></span>

割合幅ユーティリティクラスで設定<span class="placeholder w-75"></span>

インラインスタイルで設定<span class="placeholder" style="width: 25%;"></span>

カラー（Color）

デフォルトでは、placeholder は currentcolor を使用。これは、カスタムカラーかユーティリティクラスで再定義できる。

背景色の種類

設定例

<span class="placeholder col-12 bg-primary"></span>

サイズ（Sizing）

.placeholder のサイズは、親要素の文字体裁スタイルに基づいている。サイズ修飾子を使用して .placeholder-lg, .placeholder-sm, .placeholder-xs にカスタマイズ：

サイズの種類

設定例

太め<span class="placeholder col-12 placeholder-lg"></span>

細め<span class="placeholder col-12 placeholder-sm"></span>

更に細め<span class="placeholder col-12 placeholder-xs"></span>

アニメーション（Animation）

.placeholder-glow, .placeholder-wave を使用してプレースホルダをアニメーション化し、何かがアクティブにロードされているという認識をより適切に伝える。

アニメーションの種類

設定例

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

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

CSS v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 placeholders の設定$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;