Plassholdere

Bruk innlastingsplassholdere for komponentene eller sidene dine for å indikere at noe fortsatt kan lastes inn.

På denne siden

Om

Plassholdere kan brukes til å forbedre opplevelsen av applikasjonen din. De er kun bygget med HTML og CSS, noe som betyr at du ikke trenger noe JavaScript for å lage dem. Du vil imidlertid trenge litt tilpasset JavaScript for å endre deres synlighet. Utseendet, fargen og størrelsen kan enkelt tilpasses med våre bruksklasser.

Eksempel

I eksemplet nedenfor tar vi en typisk kortkomponent og gjenskaper den med plassholdere brukt for å lage et "lastekort". Størrelse og proporsjoner er de samme mellom de to.

Korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Gå et sted

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

Hvordan det fungerer

Opprett plassholdere med .placeholderklassen og en rutenettkolonneklasse (f.eks. .col-6) for å angi width. De kan erstatte teksten inne i et element eller legges til som en modifikasjonsklasse til en eksisterende komponent.

Vi bruker ekstra styling på .btns via ::beforefor å sikre at den heightrespekteres. Du kan utvide dette mønsteret for andre situasjoner etter behov, eller legge til en  i elementet for å gjenspeile høyden når faktisk tekst gjengis på plass.

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>

Bruken av aria-hidden="true"indikerer bare at elementet skal skjules for skjermlesere. Plassholderens innlastingsadferd avhenger av hvordan forfatterne faktisk vil bruke plassholderstilene, hvordan de planlegger å oppdatere ting osv. Noe JavaScript-kode kan være nødvendig for å bytte tilstanden til plassholderen og informere AT-brukere om oppdateringen.

Bredde

Du kan endre widthkolonneklassene for gjennomgående rutenett, breddeverktøy eller innebygde stiler.

html

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

Farge

Som standard placeholderbruker currentColor. Dette kan overstyres med en egendefinert farge eller verktøyklasse.

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>

Dimensjonering

Størrelsen på .placeholders er basert på den typografiske stilen til det overordnede elementet. Tilpass dem med størrelsesmodifikatorer: .placeholder-lg, .placeholder-sm, eller .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>

Animasjon

Animer plassholdere med .placeholder-gloweller .placeholder-wavefor bedre å formidle oppfatningen av at noe blir aktivt lastet.

html

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

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

Sass

Variabler

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