Substituenți

Folosiți substituenți de încărcare pentru componente sau pagini pentru a indica că este posibil ca ceva încă să se încarce.

Pe aceasta pagina

Despre

Substituenții pot fi folosiți pentru a îmbunătăți experiența aplicației dvs. Sunt construite numai cu HTML și CSS, ceea ce înseamnă că nu aveți nevoie de JavaScript pentru a le crea. Cu toate acestea, veți avea nevoie de ceva JavaScript personalizat pentru a le comuta vizibilitatea. Aspectul, culoarea și dimensiunea lor pot fi personalizate cu ușurință cu clasele noastre de utilitate.

Exemplu

În exemplul de mai jos, luăm o componentă tipică de card și o recreăm cu substituenți aplicați pentru a crea un „card de încărcare”. Mărimea și proporțiile sunt aceleași între cele două.

Titlul cardului

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Mergi undeva

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

Cum functioneaza

Creați substituenți cu .placeholderclasa și o clasă de coloană grilă (de exemplu, .col-6) pentru a seta width. Ele pot înlocui textul din interiorul unui element sau pot fi adăugate ca o clasă modificatoare la o componentă existentă.

Aplicăm un stil suplimentar pentru .btns via ::beforepentru a ne asigura că heighteste respectat. Puteți extinde acest model pentru alte situații, după cum este necesar, sau puteți adăuga un  în interiorul elementului pentru a reflecta înălțimea atunci când textul real este redat în locul său.

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>

Utilizarea aria-hidden="true"indică doar faptul că elementul ar trebui să fie ascuns cititorilor de ecran. Comportamentul de încărcare al substituentului depinde de modul în care autorii vor folosi de fapt stilurile de substituent, de modul în care plănuiesc să actualizeze lucrurile etc. Poate fi necesar un cod JavaScript pentru a schimba starea substituentului și pentru a informa utilizatorii AT despre actualizare.

Lăţime

Puteți modifica widthclasele coloanelor prin grilă, utilitarele de lățime sau stilurile inline.

html

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

Culoare

În mod implicit, placeholderfolosește currentColor. Aceasta poate fi înlocuită cu o culoare personalizată sau o clasă de utilitate.

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>

Dimensiunea

Mărimea lui .placeholders se bazează pe stilul tipografic al elementului părinte. Personalizați-le cu modificatori de dimensiune: .placeholder-lg, .placeholder-sm, sau .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>

Animaţie

Animați substituenți cu .placeholder-glowsau .placeholder-wavepentru a transmite mai bine percepția că ceva este încărcat activ .

html

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

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

Sass

Variabile

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