Plekhouers

Gebruik laaiplekhouers vir jou komponente of bladsye om aan te dui dat iets dalk nog laai.

Op hierdie bladsy

Oor

Plekhouers kan gebruik word om die ervaring van jou toepassing te verbeter. Hulle is slegs gebou met HTML en CSS, wat beteken dat jy geen JavaScript nodig het om dit te skep nie. Jy sal egter pasgemaakte JavaScript nodig hê om hul sigbaarheid te wissel. Hul voorkoms, kleur en grootte kan maklik aangepas word met ons nutsklasse.

Voorbeeld

In die voorbeeld hieronder neem ons 'n tipiese kaartkomponent en herskep dit met plekhouers wat toegepas is om 'n "laaikaart" te skep. Grootte en verhoudings is dieselfde tussen die twee.

Kaart titel

'n Paar vinnige voorbeeldteks om op die kaarttitel te bou en die grootste deel van die kaart se inhoud uit te maak.

Gaan êrens

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

Skep plekhouers met die .placeholderklas en 'n roosterkolomklas (bv. .col-6) om die width. Hulle kan die teks binne 'n element vervang of as 'n wysigerklas by 'n bestaande komponent gevoeg word.

Ons pas bykomende stilering toe op .btns via ::beforeom te verseker dat heightdit gerespekteer word. Jy kan hierdie patroon uitbrei vir ander situasies soos nodig, of 'n  binne die element byvoeg om die hoogte te weerspieël wanneer werklike teks in die plek daarvan weergegee word.

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>

Die gebruik van aria-hidden="true"dui slegs aan dat die element vir skermlesers versteek moet word. Die laaigedrag van die plekhouer hang af van hoe outeurs die plekhouerstyle werklik sal gebruik, hoe hulle beplan om dinge op te dateer, ens. Sommige JavaScript-kode mag nodig wees om die toestand van die plekhouer om te ruil en AT-gebruikers van die opdatering in te lig.

Breedte

Jy kan die widthdeurroosterkolomklasse, breedtehulpprogramme of inlynstyle verander.

html

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

Kleur

By verstek placeholdergebruik die currentColor. Dit kan vervang word met 'n pasgemaakte kleur of nutsklas.

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>

Grootte

Die grootte van .placeholders is gebaseer op die tipografiese styl van die ouerelement. Pas hulle aan met grootte wysigers: .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>

Animasie

Animeer plekhouers met .placeholder-glowof .placeholder-waveom die persepsie van iets wat aktief gelaai word beter oor te dra.

html

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

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

Sass

Veranderlikes

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