Placeholders

Aduprate i marcatori di carica per i vostri cumpunenti o pagine per indicà chì qualcosa pò ancu esse carica.

In sta pagina

À propositu

Placeholders ponu esse usatu per rinfurzà l'esperienza di a vostra applicazione. Sò custruiti solu cù HTML è CSS, chì significa chì ùn avete micca bisognu di JavaScript per creà. Averete, però, bisognu di qualchì JavaScript persunalizatu per cambià a so visibilità. U so aspettu, u culore è a dimensione pò esse facilmente persunalizati cù e nostre classi di utilità.

Esempiu

In l'esempiu quì sottu, pigliemu un cumpunente tipicu di carta è ricreate cù placeholders applicati per creà una "carta di carica". Taglia è proporzioni sò listessi trà i dui.

Titulu di a carta

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Andate in qualchì locu

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

Cumu funziona

Crea placeholders cù a .placeholderclasse è una classa di colonna di griglia (per esempiu, .col-6) per stabilisce u width. Puderanu rimpiazzà u testu in un elementu o esse aghjuntu cum'è una classa di modificatore à un cumpunente esistente.

Applicamu un stilu supplementu à .btns via ::beforeper assicurà chì heighthè rispettatu. Pudete allargà stu mudellu per altre situazioni cum'è necessariu, o aghjunghje un  in l'elementu per riflette l'altitudine quandu u testu attuale hè resu in u so locu.

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>

L'usu di aria-hidden="true"solu indica chì l'elementu deve esse oculatu à i lettori di u screnu. U cumpurtamentu di carica di u placeholder dipende da cumu l'autori anu daveru aduprà i stili di placeholder, cumu pensanu à aghjurnà e cose, etc. Qualchì codice JavaScript pò esse necessariu per scambià u statu di u placeholder è informà à l'utilizatori AT di l'aghjurnamentu.

Larghezza

Pudete cambià e widthclassi di colonna di griglia, utilità di larghezza, o stili inline.

html

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

Culore

Per automaticamente, l' placeholderusi currentColor. Questu pò esse rimpiazzatu cù un culore persunalizatu o una classe di utilità.

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>

Misure

A dimensione di .placeholders hè basatu annantu à l'stile tipograficu di l'elementu parent. Personalizàli cù modificatori di taglia: .placeholder-lg, .placeholder-sm, o .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>

Animazione

Animate i marcatori cù .placeholder-glowo .placeholder-waveper trasmette megliu a percepzione di qualcosa chì hè attivamente caricatu.

html

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

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

Sass

Variabili

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