Tijdelijke aanduidingen
Gebruik tijdelijke aanduidingen voor het laden van uw componenten of pagina's om aan te geven dat er mogelijk nog iets wordt geladen.
Over
Tijdelijke aanduidingen kunnen worden gebruikt om de ervaring van uw toepassing te verbeteren. Ze zijn alleen gebouwd met HTML en CSS, wat betekent dat je geen JavaScript nodig hebt om ze te maken. U hebt echter wat aangepast JavaScript nodig om hun zichtbaarheid te wijzigen. Hun uiterlijk, kleur en maatvoering kunnen eenvoudig worden aangepast met onze gebruiksklassen.
Voorbeeld
In het onderstaande voorbeeld nemen we een typische kaartcomponent en maken deze opnieuw met tijdelijke aanduidingen die zijn toegepast om een "laadkaart" te maken. Grootte en verhoudingen zijn hetzelfde tussen de twee.
Kaart titel
Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.
Ergens heengaan<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 het werkt
Maak tijdelijke aanduidingen met de .placeholder
klasse en een rasterkolomklasse (bijv. .col-6
) om de width
. Ze kunnen de tekst in een element vervangen of als modificatieklasse aan een bestaande component worden toegevoegd.
We passen extra styling toe op .btn
s via ::before
om ervoor te zorgen dat deze height
wordt gerespecteerd. U kunt dit patroon naar behoefte uitbreiden voor andere situaties, of een
binnen het element toevoegen om de hoogte weer te geven wanneer de werkelijke tekst op zijn plaats wordt weergegeven.
<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"
geeft alleen aan dat het element verborgen moet zijn voor schermlezers. Het
laadgedrag van de tijdelijke aanduiding hangt af van hoe auteurs de stijlen voor tijdelijke aanduidingen daadwerkelijk zullen gebruiken, hoe ze van plan zijn dingen bij te werken, enz. Er kan enige JavaScript-code nodig zijn om de status van de tijdelijke aanduiding om te
wisselen en AT-gebruikers over de update te informeren.
Breedte
U kunt de kolomklassen width
door het raster, de breedtehulpprogramma's of inline-stijlen wijzigen.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Kleur
Standaard placeholder
gebruikt de currentColor
. Dit kan worden overschreven met een aangepaste kleur of gebruiksklasse.
<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>
Maatvoering
De grootte van .placeholder
s is gebaseerd op de typografische stijl van het bovenliggende element. Pas ze aan met formaataanpassingen: .placeholder-lg
, .placeholder-sm
, of .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>
Animatie
Animeer tijdelijke aanduidingen met .placeholder-glow
of .placeholder-wave
om de perceptie van iets dat actief wordt geladen, beter over te brengen.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Variabelen
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;