Placeholders
Itilize loading placeholders pou konpozan ou oswa paj ou pou endike yon bagay ka toujou ap chaje.
Konsènan
Yo ka itilize plas pou amelyore eksperyans aplikasyon w lan. Yo bati sèlman ak HTML ak CSS, sa vle di ou pa bezwen okenn JavaScript pou kreye yo. Sepandan, w ap bezwen kèk JavaScript koutim pou chanje vizibilite yo. Aparans yo, koulè, ak gwosè yo ka fasilman Customized ak klas sèvis piblik nou yo.
Egzanp
Nan egzanp ki anba la a, nou pran yon eleman kat tipik epi rkree li ak espas ki aplike pou kreye yon "chajman kat". Gwosè ak pwopòsyon yo se menm bagay la tou ant de la.
Tit kat la
Kèk egzanp tèks rapid pou konstwi sou tit kat la epi fè gwo kantite kontni kat la.
Ale yon kote<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>
Ki jan li fonksyone
Kreye kote ki gen .placeholder
klas la ak yon klas kolòn kadriyaj (egzanp, .col-6
) pou mete width
. Yo ka ranplase tèks la andedan yon eleman oswa yo ka ajoute kòm yon klas modifye nan yon eleman ki deja egziste.
Nou aplike manier adisyonèl nan .btn
s atravè ::before
asire ke height
yo respekte. Ou ka pwolonje modèl sa a pou lòt sitiyasyon jan sa nesesè, oswa ajoute yon
nan eleman an pou reflete wotè a lè tèks aktyèl la rann nan plas li.
<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"
sèlman endike ke eleman nan ta dwe kache nan lektè ekran. Konpòtman
chajman an nan plas la depann de fason otè yo pral aktyèlman itilize estil placeholder yo, ki jan yo planifye pou mete ajou bagay sa yo, elatriye. Gen kèk kòd JavaScript ka bezwen
chanje eta a nan placeholder a epi enfòme itilizatè AT yo sou aktyalizasyon a.
Lajè
Ou ka chanje width
klas kolòn nan kadriyaj, sèvis piblik lajè, oswa estil inline.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Koulè
Pa default, placeholder
itilize yo currentColor
. Sa a ka pase sou plas ak yon koulè koutim oswa klas sèvis piblik.
<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>
Dimansyon
Gwosè .placeholder
s yo baze sou style tipografik eleman paran an. Pèsonalize yo ak modifikatè gwosè: .placeholder-lg
, .placeholder-sm
, oswa .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>
Animasyon
Anime anplasman ak .placeholder-glow
oswa .placeholder-wave
pou pi byen transmèt pèsepsyon yon bagay ke yo te chaje aktivman .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Varyab
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;