Zástupné symboly

Použijte zástupné symboly pro načítání pro vaše komponenty nebo stránky, abyste označili, že se něco může stále načítat.

Na této straně

O

Zástupné symboly lze použít k vylepšení prostředí vaší aplikace. Jsou vytvořeny pouze pomocí HTML a CSS, což znamená, že k jejich vytvoření nepotřebujete žádný JavaScript. K přepínání jejich viditelnosti však budete potřebovat nějaký vlastní JavaScript. Jejich vzhled, barvu a velikost lze snadno přizpůsobit pomocí našich užitných tříd.

Příklad

V níže uvedeném příkladu vezmeme typickou komponentu karty a znovu ji vytvoříme s aplikovanými zástupnými symboly, abychom vytvořili „načítací kartu“. Velikost a proporce jsou u obou stejné.

Název karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Jít někam

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

Jak to funguje

Vytvořte zástupné symboly s .placeholdertřídou a třídou sloupce mřížky (např. .col-6), abyste nastavili width. Mohou nahradit text uvnitř prvku nebo být přidány jako modifikační třída do existující komponenty.

Aplikujeme další styling na .btns via ::before, abychom zajistili, že heightbude respektován. Tento vzor můžete podle potřeby rozšířit pro další situace nebo přidat  do prvku a, aby odrážel výšku, když se na jeho místo vykreslí skutečný text.

<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žití aria-hidden="true"pouze označuje, že prvek by měl být pro programy pro čtení z obrazovky skrytý. Chování zástupného symbolu při načítání závisí na tom, jak autoři skutečně použijí styly zástupného symbolu, jak plánují věci aktualizovat atd. K výměně stavu zástupného symbolu a informování uživatelů AT o aktualizaci může být zapotřebí nějaký kód JavaScript.

Šířka

Můžete změnit widthtřídy sloupců průchozí mřížky, nástroje šířky nebo vložené styly.

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

Barva

Ve výchozím nastavení placeholderpoužívá currentColor. To lze přepsat vlastní barvou nebo užitnou třídou.

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

Dimenzování

Velikost .placeholders je založena na typografickém stylu nadřazeného prvku. Přizpůsobte je pomocí modifikátorů velikosti: .placeholder-lg, .placeholder-sm, nebo .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>

Animace

Animujte zástupné symboly s .placeholder-glownebo .placeholder-wavepro lepší vyjádření vnímání něčeho, co je aktivně načítáno.

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

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

Sass

Proměnné

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