Bato oyo batyaka bisika
Salelá bisika ya kotya biloko mpo na biloko to nkasa na yo mpo na komonisa ete eloko moko ekoki kozala naino kokɔtisa.
Pene
Ba placeholders ekoki kosalelama mpo na kotombola expérience ya application na yo. Batongami kaka na HTML mpe CSS, elingi koloba ete ozali na mposa ya JavaScript moko te mpo na kosala yango. Nzokande, okozala na mposa ya mwa JavaScript oyo obongisi mpo na kobongola ndenge oyo emonanaka. Emonani na bango, langi na bango, mpe bonene na bango ekoki kobongisama na pɛtɛɛ nyonso na bakelasi na biso ya utilité.
Ndakisa
Na ndakisa oyo ezali awa na se, tozui composant ya carte typique mpe tozongisa yango na ba placeholders oyo esalemi mpo na kosala “carte ya chargement”. Bonene mpe bonene ezali ndenge moko kati na makambo yango mibale.
Titre ya karte
Mwa ndakisa ya mbangu makomi mpo na kotonga likoló na motó ya likambo ya karte mpe kosala eteni monene ya makambo ya karte.
Kende esika moko boye<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>
Ndenge oyo esalaka
Bosala ba placeholders na .placeholder
classe na classe ya colonne ya grille (ndakisa, .col-6
) pona kotiya width
. Bakoki ko remplacer texte na kati ya élément to kobakisama lokola classe ya modificateur na composant oyo ezali.
Tosalelaka styling ya kobakisa na .btn
s via ::before
mpo na kosala ete ba height
respecter. Okoki koyeisa monene motindo oyo mpo na makambo mosusu soki esengeli, to kobakisa moko na
kati ya elemante mpo na komonisa bosanda ntango makomi ya solosolo mazali kobongola na esika na yango.
<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"
kaka elakisi ete esengeli kobomba élément yango mpo na batángi ya écran. Comportement
ya chargement ya placeholder etali ndenge nini bakomi bakosalela vraiment ba styles ya placeholder, ndenge nini ba planifier ko mettre à jour makambo, etc. Ba code JavaScript mosusu ekoki kozala na besoin pona ko
swap état ya placeholder pe ko informer ba usagers ya AT ya mise à jour.
Molai ya moke
Okoki kobongola ba width
classes ya colonne ya grille na nzela, ba utilitaires ya largeur, to ba styles ya inline.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Langi
Na ndenge ya libela, placeholder
basalelaka currentColor
. Yango ekoki kozala surprise na couleur personnalisée to classe ya utilitaire.
<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>
Kosala bonene ya biloko
Taille ya .placeholder
s esalemi na style typographique ya élément parent. Bongisá yango na ba modificateurs ya taille: .placeholder-lg
, .placeholder-sm
, to .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>
Animation ya kosala
Animer ba placeholders na .placeholder-glow
to .placeholder-wave
mpo na kopesa malamu koleka perception ya eloko moko ezali activement chargé.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass oyo azali
Ba variables oyo ezali
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;