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.
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 .placeholder
tří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 .btn
s via ::before
, abychom zajistili, že height
bude 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>
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 width
tří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í placeholder
použí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 .placeholder
s 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-glow
nebo .placeholder-wave
pro 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;