Plakhâlders
Brûk plakhâlders foar it laden fan jo komponinten of siden om oan te jaan dat iets noch laden wurdt.
Oer
Plakhâlders kinne wurde brûkt om de ûnderfining fan jo applikaasje te ferbetterjen. Se binne allinich boud mei HTML en CSS, wat betsjuttet dat jo gjin JavaScript hawwe om se te meitsjen. Jo sille lykwols wat oanpast JavaScript nedich wêze om har sichtberens te wikseljen. Har uterlik, kleur en grutte kinne maklik wurde oanpast mei ús nutklassen.
Foarbyld
Yn it foarbyld hjirûnder nimme wy in typyske kaartkomponint en meitsje it opnij oan mei plakhâlders dy't tapast wurde om in "laadkaart" te meitsjen. Grutte en proporsjes binne itselde tusken de twa.
Kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Earne hinne gean<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't it wurket
Meitsje plakhâlders mei de .placeholder
klasse en in rasterkolomklasse (bgl. .col-6
) om de width
. Se kinne de tekst yn in elemint ferfange of wurde tafoege as in modifikaasjeklasse oan in besteande komponint.
Wy tapasse ekstra styling oan .btn
s fia ::before
om te soargjen dat de height
wurdt respektearre. Jo kinne dit patroan útwreidzje foar oare situaasjes as nedich, of in tafoegje
binnen it elemint om de hichte te reflektearjen as de eigentlike tekst op syn plak wurdt werjûn.
<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"
jout allinich oan dat it elemint ferburgen wêze moat foar skermlêzers. It
laden gedrach fan 'e plakhâlder hinget ôf fan hoe't auteurs de pleatshâlderstilen eins brûke sille, hoe't se fan plan binne dingen te aktualisearjen, ensfh. Guon JavaScript-koade kin nedich wêze om
de steat fan 'e plakhâlder
te wikseljen en AT-brûkers oer de fernijing te ynformearjen.Breedte
Jo kinne de width
trochrasterkolomklassen, breedte-hulpprogramma's of ynline-stilen feroarje.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Kleur
Standert placeholder
brûke de currentColor
. Dit kin oerskreaun wurde mei in oanpaste kleur of nutsklasse.
<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>
Sizing
De grutte fan .placeholder
s binne basearre op de typografyske styl fan it âlderelemint. Oanpasse se mei grutte modifiers: .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>
Animaasje
Animearje plakhâlders mei .placeholder-glow
of .placeholder-wave
om de belibbing fan iets dat aktyf laden wurdt better oer te bringen.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Fariabelen
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;