Заместители
Използвайте контейнери за зареждане за вашите компоненти или страници, за да посочите, че нещо може все още да се зарежда.
относно
Заместителите могат да се използват за подобряване на изживяването на вашето приложение. Те са създадени само с 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"
само показва, че елементът трябва да бъде скрит за екранните четци. Поведението
при зареждане на контейнера зависи от това как авторите действително ще използват стиловете на контейнера, как планират да актуализират нещата и т.н. Може да е необходим някакъв 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>
Оразмеряване
Размерът на .placeholder
s се основава на типографския стил на родителския елемент. Персонализирайте ги с модификатори за оразмеряване: .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;