Pladsholdere

Brug indlæsningspladsholdere til dine komponenter eller sider for at angive, at noget stadig indlæses.

På denne side

Om

Pladsholdere kan bruges til at forbedre oplevelsen af din applikation. De er kun bygget med HTML og CSS, hvilket betyder, at du ikke behøver noget JavaScript for at oprette dem. Du skal dog bruge noget tilpasset JavaScript for at skifte deres synlighed. Deres udseende, farve og størrelse kan nemt tilpasses med vores brugsklasser.

Eksempel

I eksemplet nedenfor tager vi en typisk kortkomponent og genskaber den med pladsholdere anvendt for at skabe et "indlæsningskort". Størrelse og proportioner er de samme mellem de to.

Kortets titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Gå et sted hen

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

Opret pladsholdere med .placeholderklassen og en gitterkolonneklasse (f.eks. .col-6) for at indstille width. De kan erstatte teksten inde i et element eller tilføjes som en modifikatorklasse til en eksisterende komponent.

Vi anvender yderligere styling til .btns via ::beforefor at sikre, at den heightrespekteres. Du kan udvide dette mønster til andre situationer efter behov, eller tilføje et  i elementet for at afspejle højden, når den faktiske tekst gengives på sin plads.

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

Brugen af aria-hidden="true"angiver kun, at elementet skal være skjult for skærmlæsere. Indlæsningsadfærden for pladsholderen afhænger af, hvordan forfattere rent faktisk vil bruge pladsholderstilene, hvordan de planlægger at opdatere ting osv. Noget JavaScript-kode kan være nødvendigt for at udskifte pladsholderens tilstand og informere AT-brugere om opdateringen.

Bredde

Du kan ændre widthkolonneklasserne for gennemgående gitter, breddeværktøjer eller indlejrede stilarter.

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

Farve

Som standard placeholderbruger currentColor. Dette kan tilsidesættes med en brugerdefineret farve eller hjælpeklasse.

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

Dimensionering

Størrelsen på .placeholders er baseret på det overordnede elements typografiske stil. Tilpas dem med størrelsesmodifikatorer: .placeholder-lg, .placeholder-sm, eller .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

Animer pladsholdere med .placeholder-gloweller .placeholder-wavefor bedre at formidle opfattelsen af, at noget bliver aktivt indlæst.

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