Nadomestni znaki

Uporabite ogradne oznake za nalaganje za svoje komponente ali strani, da označite, da se nekaj morda še nalaga.

Na tej strani

O tem

Ograde lahko uporabite za izboljšanje izkušnje vaše aplikacije. Zgrajeni so samo s HTML in CSS, kar pomeni, da za njihovo ustvarjanje ne potrebujete JavaScripta. Za preklop njihove vidnosti pa boste potrebovali nekaj JavaScripta po meri. Njihov videz, barvo in velikost je mogoče preprosto prilagoditi z našimi razredi uporabnosti.

Primer

V spodnjem primeru vzamemo tipično komponento kartice in jo ponovno ustvarimo z uporabljenimi ogradami, da ustvarimo »nalagalno kartico«. Velikost in razmerja med obema sta enaka.

Naslov kartice

Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Pojdi nekam

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

Kako deluje

Ustvarite ograde z .placeholderrazredom in razredom stolpca mreže (npr. .col-6), da nastavite width. Lahko nadomestijo besedilo znotraj elementa ali pa jih dodajo kot modifikatorski razred obstoječi komponenti.

Dodatno oblikujemo .btns preko ::before, da zagotovimo heightspoštovanje. Ta vzorec lahko po potrebi razširite za druge situacije ali dodate  znotraj elementa, da odraža višino, ko je dejansko besedilo upodobljeno na njegovem mestu.

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>

Uporaba aria-hidden="true"samo pomeni, da mora biti element skrit za bralnike zaslona. Vedenje nalaganja nadomestnega znaka je odvisno od tega, kako bodo avtorji dejansko uporabili nadomestne sloge, kako nameravajo posodobiti stvari itd. Morda bo potrebna nekaj kode JavaScript za zamenjavo stanja nadomestnega znaka in obveščanje uporabnikov AT o posodobitvi.

Premer

Spremenite lahko widthrazrede stolpcev skozi mrežo, pripomočke za širino ali vgrajene sloge.

html

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

barva

Privzeto placeholderuporablja currentColor. To je mogoče preglasiti z barvo po meri ali razredom uporabnosti.

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>

Dimenzioniranje

Velikost .placeholders temelji na tipografskem slogu nadrejenega elementa. Prilagodite jih z modifikatorji velikosti: .placeholder-lg, .placeholder-smali .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>

Animacija

Animirajte ogradne oznake z .placeholder-glowali .placeholder-wave, da bolje prenesete zaznavanje nečesa, kar se aktivno nalaga.

html

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

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

Sass

Spremenljivke

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