Placeholders

Koristite čuvare mjesta za učitavanje za svoje komponente ili stranice kako biste naznačili da se nešto još uvijek učitava.

Na ovoj stranici

O

Čuvari mjesta se mogu koristiti za poboljšanje iskustva vaše aplikacije. Napravljeni su samo sa HTML-om i CSS-om, što znači da vam nije potreban JavaScript da biste ih kreirali. Međutim, trebat će vam neki prilagođeni JavaScript da biste promijenili njihovu vidljivost. Njihov izgled, boja i veličina mogu se lako prilagoditi našim uslužnim klasama.

Primjer

U primjeru ispod, uzimamo tipičnu komponentu kartice i ponovo je kreiramo s primijenjenim rezerviranim mjestima za kreiranje „kartice za učitavanje“. Veličina i proporcije su iste između njih.

Naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Idi negde

<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

Kreirajte čuvare mjesta s .placeholderklasom i klasom stupca mreže (npr. .col-6) da postavite width. Oni mogu zamijeniti tekst unutar elementa ili se dodati kao modifikatorska klasa postojećoj komponenti.

Primjenjujemo dodatni stil na .btns via ::beforekako bismo osigurali da heightse poštuje. Možete proširiti ovaj obrazac za druge situacije po potrebi ili dodati a  unutar elementa da odražava visinu kada se stvarni tekst prikazuje na njegovom mjestu.

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>

Upotreba aria-hidden="true"samo označava da element treba sakriti čitačima ekrana. Ponašanje učitavanja čuvara mjesta ovisi o tome kako će autori zapravo koristiti stilove čuvara mjesta, kako planiraju ažurirati stvari, itd. Neki JavaScript kod može biti potreban da se promijeni stanje čuvara mjesta i informiše AT korisnike o ažuriranju.

Širina

Možete promijeniti widthklase stupaca kroz mrežu, pomoćne programe širine ili inline stilove.

html

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

Boja

Podrazumevano, placeholderkoristi currentColor. Ovo se može nadjačati sa prilagođenom bojom ili klasom korisnosti.

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>

Određivanje veličine

Veličina .placeholders je zasnovana na tipografskom stilu nadređenog elementa. Prilagodite ih modifikatorima veličine: .placeholder-lg, .placeholder-sm, ili .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 rezervirane mjesta pomoću .placeholder-glowili .placeholder-waveda biste bolje prenijeli percepciju nečega što se aktivno učitava.

html

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