in English
佔位符
為您的組件或頁面使用加載佔位符以指示某些內容可能仍在加載。
在本頁面
關於
佔位符可用於增強應用程序的體驗。它們僅使用 HTML 和 CSS 構建,這意味著您不需要任何 JavaScript 來創建它們。但是,您將需要一些自定義 JavaScript 來切換它們的可見性。它們的外觀、顏色和尺寸可以通過我們的實用程序類輕鬆定制。
例子
在下面的示例中,我們採用一個典型的卡片組件並使用佔位符重新創建它以創建“加載卡片”。兩者之間的大小和比例相同。
<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
得到尊重。您可以根據需要將此模式擴展到其他情況,或者
在元素中添加一個以反映實際文本在其位置呈現時的高度。
<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"
only 表示該元素應該對屏幕閱讀器隱藏。佔位符的
加載行為取決於作者將如何實際使用佔位符樣式、他們計劃如何更新事物等。可能需要一些 JavaScript 代碼來
交換佔位符的狀態並通知 AT 用戶更新。
寬度
您可以更改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>
漿紗
s的大小.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;