in English

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.

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

html

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

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>

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.

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>

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.

html

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