Plazhalter

Benotzt Luede Plazhalter fir Är Komponenten oder Säiten fir unzeweisen datt eppes nach gelueden ass.

Op dëser Säit

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 .placeholderKlass 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 .btns via ::beforefir ze garantéieren datt de heightrespekté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.

html

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

D'Benotzung vun 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 widthduerch Gitter Kolonn Klassen, Breet Utilities oder Inline Stiler änneren.

html

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

Faarf

Par défaut placeholderbenotzt d ' currentColor. Dëst kann iwwerschratt ginn mat enger personaliséierter Faarf oder Utility Klass.

html

<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 .placeholders baséiert op der typographescher Stil vun der Elterendeel Element. Passt se mat Gréisstmodifikateuren un: .placeholder-lg, .placeholder-sm, oder .placeholder-xs.

html

<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-glowoder .placeholder-wavefir d'Perceptioun besser ze vermëttelen datt eppes aktiv gelueden gëtt.

html

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