Kohatäitjad

Kasutage oma komponentide või lehtede jaoks laadimiskohahoidjaid, et näidata, et midagi võib veel laadida.

Sellel lehel

Umbes

Kohatäiteid saab kasutada rakenduse kasutuskogemuse parandamiseks. Need on loodud ainult HTML-i ja CSS-iga, mis tähendab, et nende loomiseks pole vaja JavaScripti. Nende nähtavuse sisselülitamiseks vajate siiski kohandatud JavaScripti. Nende välimust, värvi ja suurust saab meie kasulike klasside abil hõlpsasti kohandada.

Näide

Allolevas näites võtame tüüpilise kaardikomponendi ja loome selle uuesti koos kohahoidjatega, mida kasutatakse laadimiskaardi loomiseks. Suurus ja proportsioonid on nende kahe vahel samad.

Kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Mine kuhugi

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

Kuidas see töötab

Looge kohahoidjad .placeholderklassi ja ruudustiku veeru klassiga (nt .col-6), et määrata width. Need võivad asendada teksti elemendi sees või lisada olemasolevale komponendile modifikaatoriklassina.

.btnRakendame s via -le täiendavat stiili, ::beforeet tagada selle heightjärgimine. Saate seda mustrit vajaduse korral muudes olukordades laiendada või lisada  elemendi sisse kõrguse kajastamiseks, kui tegelik tekst selle asemele renderdatakse.

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

Kasutamine aria-hidden="true"näitab ainult, et element tuleks ekraanilugejate jaoks peita. Kohahoidja laadimiskäitumine sõltub sellest, kuidas autorid kohatäite stiile tegelikult kasutavad, kuidas nad plaanivad asju värskendada jne . Kohatäite oleku vahetamiseks ja AT kasutajate teavitamiseks värskendusest võib vaja minna JavaScripti koodi.

Laius

Saate muuta widthläbiva ruudustiku veergude klasse, laiuse utiliite või tekstisiseseid stiile.

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

Värv

Vaikimisi placeholderkasutab currentColor. Selle saab tühistada kohandatud värvi või kasuliku klassiga.

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

Suuruse määramine

S-i suurus .placeholderpõhinevad lähteelemendi tüpograafilisel stiilil. Kohandage neid suuruse muutjatega: .placeholder-lg, .placeholder-sm, või .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>

Animatsioon

Animeerige kohahoidjad koos .placeholder-glowvõi .placeholder-waveparemini edasi andma arusaama millegi aktiivsest laadimisest.

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

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

Sass

Muutujad

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