Vendmbajtësit

Përdorni mbajtëset e ngarkimit për komponentët ose faqet tuaja për të treguar se diçka mund të jetë ende duke u ngarkuar.

Në këtë faqe

Rreth

Vendmbajtësit mund të përdoren për të përmirësuar përvojën e aplikacionit tuaj. Ato janë ndërtuar vetëm me HTML dhe CSS, që do të thotë se nuk keni nevojë për ndonjë JavaScript për t'i krijuar ato. Sidoqoftë, do t'ju duhet disa JavaScript me porosi për të ndryshuar dukshmërinë e tyre. Pamja, ngjyra dhe madhësia e tyre mund të personalizohen lehtësisht me klasat tona të shërbimeve.

Shembull

Në shembullin e mëposhtëm, ne marrim një komponent tipik të kartës dhe e rikrijojmë atë me mbajtës të vendeve të aplikuara për të krijuar një "kartë ngarkimi". Madhësia dhe proporcionet janë të njëjta midis të dyjave.

Titulli i kartës

Një shembull i shpejtë teksti për t'u ndërtuar mbi titullin e kartës dhe për të bërë pjesën më të madhe të përmbajtjes së kartës.

Shko diku

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

Si punon

Krijoni mbajtëse vendesh me .placeholderklasën dhe një klasë kolone rrjeti (p.sh., .col-6) për të vendosur width. Ato mund të zëvendësojnë tekstin brenda një elementi ose të shtohen si një klasë modifikuesi në një komponent ekzistues.

Ne aplikojmë stilim shtesë për .btns via ::beforepër të siguruar që heightështë respektuar. Ju mund ta zgjeroni këtë model për situata të tjera sipas nevojës, ose të shtoni një  brenda elementit për të pasqyruar lartësinë kur teksti aktual jepet në vendin e tij.

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>

Përdorimi i aria-hidden="true"vetëm tregon se elementi duhet të fshihet te lexuesit e ekranit. Sjellja e ngarkimit të mbajtësit të vendndodhjes varet nga mënyra se si autorët do të përdorin në të vërtetë stilet e mbajtësit të vendndodhjes, si planifikojnë të përditësojnë gjërat, etj. Mund të nevojitet një kod JavaScript për të ndërruar gjendjen e mbajtësit të vendndodhjes dhe për të informuar përdoruesit e AT për përditësimin.

Gjerësia

Ju mund të ndryshoni widthklasat e kolonave përmes rrjetit, shërbimet e gjerësisë ose stilet inline.

html

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

Ngjyrë

Si parazgjedhje, placeholderpërdor currentColor. Kjo mund të anashkalohet me një ngjyrë të personalizuar ose klasë të shërbimeve.

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>

Përmasat

Madhësia e .placeholders bazohet në stilin tipografik të elementit prind. Personalizojini ato me modifikuesit e madhësisë: .placeholder-lg, .placeholder-sm, ose .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>

Animacion

Animoni mbajtësit e vendeve me .placeholder-glowose .placeholder-wavepër të përcjellë më mirë perceptimin e diçkaje që ngarkohet në mënyrë aktive .

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Variablat

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;