Vendmbajtësit
Përdorni mbajtëset e ngarkimit për komponentët ose faqet tuaja për të treguar se diçka mund të jetë ende duke u ngarkuar.
Rreth
Vendmbajtësit mund të përdoren për të përmirësuar përvojën e aplikacionit tuaj. Ato janë ndërtuar vetëm me HTML dhe CSS, që do të thotë se nuk keni nevojë për ndonjë JavaScript për t'i krijuar ato. Sidoqoftë, do t'ju duhet disa JavaScript me porosi për të ndryshuar dukshmërinë e tyre. Pamja, ngjyra dhe madhësia e tyre mund të personalizohen lehtësisht me klasat tona të shërbimeve.
Shembull
Në shembullin e mëposhtëm, ne marrim një komponent tipik të kartës dhe e rikrijojmë atë me mbajtës të vendeve të aplikuara për të krijuar një "kartë ngarkimi". Madhësia dhe proporcionet janë të njëjta midis të dyjave.
Titulli i kartës
Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.
Shko diku<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>
Si punon
Krijoni mbajtëse vendesh me .placeholder
klasën dhe një klasë kolone rrjeti (p.sh., .col-6
) për të vendosur width
. Ato mund të zëvendësojnë tekstin brenda një elementi ose të shtohen si një klasë modifikuesi në një komponent ekzistues.
Ne aplikojmë stilim shtesë për .btn
s via ::before
për të siguruar që height
është respektuar. Ju mund ta zgjeroni këtë model për situata të tjera sipas nevojës, ose të shtoni një
brenda elementit për të pasqyruar lartësinë kur teksti aktual jepet në vendin e tij.
<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"
vetëm tregon se elementi duhet të fshihet te lexuesit e ekranit. Sjellja
e ngarkimit të mbajtësit të vendndodhjes varet nga mënyra se si autorët do të përdorin në të vërtetë stilet e mbajtësit të vendndodhjes, si planifikojnë të përditësojnë gjërat, etj. Mund të nevojitet një kod JavaScript për të
ndërruar gjendjen e mbajtësit të vendndodhjes dhe për të informuar përdoruesit e AT për përditësimin.
Gjerësia
Ju mund të ndryshoni width
klasat e kolonave përmes rrjetit, shërbimet e gjerësisë ose stilet inline.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Ngjyrë
Si parazgjedhje, placeholder
përdor currentColor
. Kjo mund të anashkalohet me një ngjyrë të personalizuar ose klasë të shërbimeve.
<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>
Përmasat
Madhësia e .placeholder
s bazohet në stilin tipografik të elementit prind. Personalizojini ato me modifikuesit e madhësisë: .placeholder-lg
, .placeholder-sm
, ose .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>
Animacion
Animoni mbajtësit e vendeve me .placeholder-glow
ose .placeholder-wave
për të përcjellë më mirë perceptimin e diçkaje që ngarkohet në mënyrë aktive .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Variablat
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;