Rezervirana mjesta

Upotrijebite rezervirana mjesta za učitavanje svojih komponenti ili stranica kako biste označili da se nešto još uvijek učitava.

Na ovoj stranici

Oko

Rezervirana mjesta mogu se koristiti za poboljšanje iskustva vaše aplikacije. Izrađeni su samo pomoću HTML-a i CSS-a, što znači da vam za njihovu izradu nije potreban JavaScript. Međutim, trebat će vam prilagođeni JavaScript za promjenu njihove vidljivosti. Njihov izgled, boja i veličina mogu se jednostavno prilagoditi našim klasama korisnosti.

Primjer

U donjem primjeru uzimamo tipičnu komponentu kartice i ponovno je stvaramo s primijenjenim rezerviranim mjestima za stvaranje "kartice za učitavanje". Veličina i proporcije su jednaki između njih dvoje.

Naslov kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Ici negdje

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

Stvorite rezervirana mjesta s .placeholderklasom i klasom stupca rešetke (npr. .col-6) da postavite width. Oni mogu zamijeniti tekst unutar elementa ili se dodati kao klasa modifikatora postojećoj komponenti.

Primjenjujemo dodatni stil na .btns via ::beforekako bismo osigurali heightpoštovanje. Po potrebi možete proširiti ovaj uzorak za druge situacije ili dodati  unutar elementa da odražava visinu kada se stvarni tekst prikazuje na svom mjestu.

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

Korištenje aria-hidden="true"označava samo da element treba biti skriven za čitače zaslona. Ponašanje rezerviranog mjesta pri učitavanju ovisi o tome kako će autori zapravo koristiti stilove rezerviranog mjesta, kako planiraju ažurirati stvari itd. Možda će biti potreban neki JavaScript kod za promjenu stanja rezerviranog mjesta i obavještavanje AT korisnika o ažuriranju.

Širina

Možete promijeniti widthklase stupaca rešetke, pomoćne programe širine ili ugrađene stilove.

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

Boja

Prema zadanim postavkama, placeholderkoristi currentColor. Ovo se može nadjačati prilagođenom bojom ili uslužnom klasom.

<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

Veličina .placeholders temelji se na tipografskom stilu nadređenog elementa. Prilagodite ih modifikatorima veličine: .placeholder-lg, .placeholder-smili .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>

Animacija

Animirajte rezervirana mjesta s .placeholder-glowili .placeholder-wavekako biste bolje prenijeli percepciju nečega što se aktivno učitava.

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

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

Sass

Varijable

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