Чувари места
Користите чуваре места за учитавање за своје компоненте или странице да бисте назначили да се нешто још увек учитава.
О томе
Чувари места се могу користити за побољшање доживљаја ваше апликације. Направљени су само помоћу ХТМЛ-а и ЦСС-а, што значи да вам није потребан ЈаваСцрипт да бисте их креирали. Међутим, биће вам потребан неки прилагођени ЈаваСцрипт да бисте променили њихову видљивост. Њихов изглед, боја и величина могу се лако прилагодити нашим услужним класама.
Пример
У примеру испод, узимамо типичну компоненту картице и поново је креирамо са примењеним чуварима места за креирање „картице за учитавање“. Величина и пропорције су исте између њих.
Наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Иди негде<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
с виа ::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"
само указује на то да елемент треба да буде сакривен читачима екрана. Понашање
учитавања чувара места зависи од тога како ће аутори заправо користити стилове чувара места, како планирају да ажурирају ствари, итд. Можда ће бити потребан неки ЈаваСцрипт код да би се
променило стање чувара места и обавестили АТ кориснике о ажурирању.
Ширина
Можете да промените 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;