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.

Na lokasa oyo

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 .placeholderclasse 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 .btns via ::beforempo na kosala ete ba heightrespecter. 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.

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>

Kosalela 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 widthclasses ya colonne ya grille na nzela, ba utilitaires ya largeur, to ba styles ya inline.

html

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

Langi

Na ndenge ya libela, placeholderbasalelaka currentColor. Yango ekoki kozala surprise na couleur personnalisée to classe ya utilitaire.

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>

Kosala bonene ya biloko

Taille ya .placeholders esalemi na style typographique ya élément parent. Bongisá yango na ba modificateurs ya taille: .placeholder-lg, .placeholder-sm, to .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>

Animation ya kosala

Animer ba placeholders na .placeholder-glowto .placeholder-wavempo na kopesa malamu koleka perception ya eloko moko ezali activement chargé.

html

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