Plassholdere
Bruk innlastingsplassholdere for komponentene eller sidene dine for å indikere at noe fortsatt kan lastes inn.
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 .placeholder
klassen 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å .btn
s via ::before
for å sikre at den height
respekteres. 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.
<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>
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 width
kolonneklassene for gjennomgående rutenett, breddeverktøyene eller innebygde stiler.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Farge
Som standard placeholder
bruker currentColor
. Dette kan overstyres med en egendefinert farge eller verktøyklasse.
<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å .placeholder
s er basert på den typografiske stilen til det overordnede elementet. Tilpass 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>
Animasjon
Animer plassholdere med .placeholder-glow
eller .placeholder-wave
for bedre å formidle oppfatningen av at noe blir aktivt lastet.
<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;