Plakhâlders

Brûk plakhâlders foar it laden fan jo komponinten of siden om oan te jaan dat iets noch laden wurdt.

Op dizze side

Oer

Plakhâlders kinne wurde brûkt om de ûnderfining fan jo applikaasje te ferbetterjen. Se binne allinich boud mei HTML en CSS, wat betsjuttet dat jo gjin JavaScript hawwe om se te meitsjen. Jo sille lykwols wat oanpast JavaScript nedich wêze om har sichtberens te wikseljen. Har uterlik, kleur en grutte kinne maklik wurde oanpast mei ús nutklassen.

Foarbyld

Yn it foarbyld hjirûnder nimme wy in typyske kaartkomponint en meitsje it opnij oan mei plakhâlders dy't tapast wurde om in "laadkaart" te meitsjen. Grutte en proporsjes binne itselde tusken de twa.

Kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Earne hinne gean

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

Hoe't it wurket

Meitsje plakhâlders mei de .placeholderklasse en in rasterkolomklasse (bgl. .col-6) om de width. Se kinne de tekst yn in elemint ferfange of wurde tafoege as in modifikaasjeklasse oan in besteande komponint.

Wy tapasse ekstra styling oan .btns fia ::beforeom te soargjen dat de heightwurdt respektearre. Jo kinne dit patroan útwreidzje foar oare situaasjes as nedich, of in tafoegje  binnen it elemint om de hichte te reflektearjen as de eigentlike tekst op syn plak wurdt werjûn.

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>

It gebrûk fan aria-hidden="true"jout allinich oan dat it elemint ferburgen wêze moat foar skermlêzers. It laden gedrach fan 'e plakhâlder hinget ôf fan hoe't auteurs de pleatshâlderstilen eins brûke sille, hoe't se fan plan binne dingen te aktualisearjen, ensfh. Guon JavaScript-koade kin nedich wêze om de steat fan 'e plakhâlder te wikseljen en AT-brûkers oer de fernijing te ynformearjen.

Breedte

Jo kinne de widthtrochrasterkolomklassen, breedte-hulpprogramma's of ynline-stilen feroarje.

html

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

Kleur

Standert placeholderbrûke de currentColor. Dit kin oerskreaun wurde mei in oanpaste kleur of nutsklasse.

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>

Sizing

De grutte fan .placeholders binne basearre op de typografyske styl fan it âlderelemint. Oanpasse se mei grutte modifiers: .placeholder-lg, .placeholder-sm, of .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>

Animaasje

Animearje plakhâlders mei .placeholder-glowof .placeholder-waveom de belibbing fan iets dat aktyf laden wurdt better oer te bringen.

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Fariabelen

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;