Чувари места

Користите чуваре места за учитавање за своје компоненте или странице да бисте назначили да се нешто још увек учитава.

На овој страници

О томе

Чувари места се могу користити за побољшање доживљаја ваше апликације. Направљени су само помоћу ХТМЛ-а и ЦСС-а, што значи да вам није потребан ЈаваСцрипт да бисте их креирали. Међутим, биће вам потребан неки прилагођени ЈаваСцрипт да бисте променили њихову видљивост. Њихов изглед, боја и величина могу се лако прилагодити нашим услужним класама.

Пример

У примеру испод, узимамо типичну компоненту картице и поново је креирамо са примењеним чуварима места за креирање „картице за учитавање“. Величина и пропорције су исте између њих.

Наслов картице

Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.

Иди негде

<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;