Rezervirana mjesta
Upotrijebite rezervirana mjesta za učitavanje svojih komponenti ili stranica kako biste označili da se nešto još uvijek učitava.
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 .placeholder
klasom 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 .btn
s via ::before
kako bismo osigurali height
poš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>
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 width
klase 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, placeholder
koristi 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 .placeholder
s temelji se na tipografskom stilu nadređenog elementa. Prilagodite ih modifikatorima veličine: .placeholder-lg
, .placeholder-sm
ili .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-glow
ili .placeholder-wave
kako 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;