Zástupné symboly

Použite zástupné symboly na načítanie pre vaše komponenty alebo stránky, aby ste označili, že sa niečo stále načítava.

Na tejto stránke

O

Zástupné symboly možno použiť na zlepšenie zážitku z vašej aplikácie. Sú vytvorené iba pomocou HTML a CSS, čo znamená, že na ich vytvorenie nepotrebujete žiadny JavaScript. Na prepnutie ich viditeľnosti však budete potrebovať nejaký vlastný JavaScript. Ich vzhľad, farbu a veľkosť možno ľahko prispôsobiť pomocou našich tried úžitkových vlastností.

Príklad

V nižšie uvedenom príklade vezmeme typický komponent karty a znova ho vytvoríme so zástupnými symbolmi aplikovanými na vytvorenie „načítacej karty“. Veľkosť a proporcie sú medzi nimi rovnaké.

Názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Ísť niekam

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

Ako to funguje

Vytvorte zástupné symboly s .placeholdertriedou a triedou stĺpca mriežky (napr. .col-6), aby ste nastavili width. Môžu nahradiť text vo vnútri prvku alebo sa môžu pridať ako trieda modifikátorov do existujúceho komponentu.

Aplikujeme dodatočný styling na .btns via ::before, aby sme zaistili heightrešpektovanie. Tento vzor môžete podľa potreby rozšíriť o ďalšie situácie alebo pridať  do prvku a, aby odrážalo výšku, keď sa na jeho miesto vykreslí skutočný text.

html

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

Použitie aria-hidden="true"iba znamená, že prvok by mal byť pre čítačky obrazovky skrytý. Správanie zástupného symbolu pri načítaní závisí od toho, ako autori skutočne použijú štýly zástupného symbolu, ako plánujú veci aktualizovať atď. Na výmenu stavu zástupného symbolu a informovanie používateľov AT o aktualizácii môže byť potrebný určitý kód JavaScript.

šírka

Môžete zmeniť widthtriedy stĺpcov cez mriežku, nástroje šírky alebo vložené štýly.

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Farba

V predvolenom nastavení sa placeholderpoužíva currentColor. Toto je možné prepísať vlastnou farbou alebo triedou úžitkových vlastností.

html

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

Dimenzovanie

Veľkosť .placeholders je založená na typografickom štýle nadradeného prvku. Prispôsobte si ich pomocou modifikátorov veľkosti: .placeholder-lg, .placeholder-sm, alebo .placeholder-xs.

html

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

Animácia

Animujte zástupné symboly s .placeholder-glowalebo .placeholder-wavena lepšie vyjadrenie vnímania niečoho, čo je aktívne načítané.

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Premenné

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;