プレースホルダー
コンポーネントまたはページの読み込みプレースホルダーを使用して、何かがまだ読み込まれている可能性があることを示します。
約
プレースホルダーを使用して、アプリケーションのエクスペリエンスを向上させることができます。これらは 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
ます。要素内のテキストを置き換えたり、モディファイア クラスとして既存のコンポーネントに追加したりできます。
.btn
s viaに追加のスタイルを適用::before
して、height
が尊重されるようにします。必要に応じてこのパターンを他の状況に拡張するか
、要素内に a を追加して、実際のテキストがその場所にレンダリングされるときの高さを反映することができます。
<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>
aria-hidden="true"
、スクリーン リーダーに対して要素を非表示にする必要があることを示します。プレースホルダーの
読み込み動作は、作成者がプレースホルダー スタイルを実際にどのように使用するか、どのように更新を計画しているかなどによって異なります。プレースホルダーの状態を
交換し、AT ユーザーに更新を通知するには、JavaScript コードが必要になる場合があります。
幅
width
スルー グリッド列クラス、幅ユーティリティ、またはインライン スタイルを変更できます。
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
色
デフォルトでは、placeholder
はcurrentColor
. これは、カスタム カラーまたはユーティリティ クラスでオーバーライドできます。
<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
。
<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
<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;