Plazhalter
Benotzt Luede Plazhalter fir Är Komponenten oder Säiten fir unzeweisen datt eppes nach gelueden ass.
Iwwer
Plazhalter kënne benotzt ginn fir d'Erfahrung vun Ärer Applikatioun ze verbesseren. Si sinn nëmme mat HTML an CSS gebaut, dat heescht datt Dir kee JavaScript braucht fir se ze kreéieren. Dir braucht awer e puer personaliséiert JavaScript fir hir Visibilitéit ze wiesselen. Hir Erscheinung, Faarf a Gréisst kënne ganz einfach mat eisen Utilityklassen personaliséiert ginn.
Beispill
Am Beispill hei drënner, huelen mir eng typesch Kaart Komponente an nees et mat Plazhalter applizéiert eng "Luede Kaart" ze schafen. D'Gréisst an d'Proportiounen sinn d'selwecht tëscht deenen zwee.
Kaart Titel
E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.
Gitt iergendwou<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>
Wéi et funktionnéiert
Erstellt Plazhalter mat der .placeholder
Klass an enger Gitterkolonneklass (zB .col-6
) fir de width
. Si kënnen den Text an engem Element ersetzen oder als Modifizéierungsklass op eng existent Komponent bäigefüügt ginn.
Mir gëllen zousätzlech Styling op .btn
s via ::before
fir ze garantéieren datt de height
respektéiert gëtt. Dir kënnt dëst Muster fir aner Situatiounen verlängeren wéi néideg, oder e
bannent dem Element derbäigesat fir d'Héicht ze reflektéieren wann den aktuellen Text op senger Plaz ofgeliwwert gëtt.
<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"
nëmmen weist datt d'Element fir Écran Lieser verstoppt soll ginn. D'
Laaschtverhalen vum Plazhalter hänkt dovun of wéi d'Auteuren d'Plazhalterstiler tatsächlech benotzen, wéi se plangen d'Saachen ze aktualiséieren, asw.. E puer JavaScript-Code kann néideg sinn fir
den Zoustand vum Plazhalter auszetauschen an AT Benotzer vum Update z'informéieren.
Breet
Dir kënnt width
duerch Gitter Kolonn Klassen, Breet Utilities oder Inline Stiler änneren.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Faarf
Par défaut placeholder
benotzt d ' currentColor
. Dëst kann iwwerschratt ginn mat enger personaliséierter Faarf oder Utility Klass.
<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>
Gréisst
D'Gréisst vun .placeholder
s baséiert op der typographescher Stil vun der Elterendeel Element. Passt se mat Gréisstmodifikateuren un: .placeholder-lg
, .placeholder-sm
, oder .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>
Animatioun
Animéiert Plazhalter mat .placeholder-glow
oder .placeholder-wave
fir d'Perceptioun besser ze vermëttelen datt eppes aktiv gelueden gëtt.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Variablen
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;