Vietturi

Izmantojiet ielādes vietturus saviem komponentiem vai lapām, lai norādītu, ka kaut kas joprojām tiek ielādēts.

Šajā lapā

Par

Vietturus var izmantot, lai uzlabotu lietojumprogrammas lietošanas pieredzi. Tie ir veidoti tikai ar HTML un CSS, kas nozīmē, ka to izveidei nav nepieciešams JavaScript. Tomēr jums būs nepieciešams pielāgots JavaScript, lai pārslēgtu to redzamību. To izskatu, krāsu un izmērus var viegli pielāgot, izmantojot mūsu lietderības klases.

Piemērs

Tālāk esošajā piemērā mēs ņemam tipisku kartes komponentu un izveidojam to no jauna ar vietturiem, kas tiek lietoti, lai izveidotu “ielādēšanas karti”. Izmērs un proporcijas abiem ir vienādas.

Kartes nosaukums

Daži īsi teksta paraugi, kas jāveido, pamatojoties uz kartītes nosaukumu un veidojot lielāko daļu kartītes satura.

Aizej kaut kur

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

Kā tas strādā

Izveidojiet vietturus ar .placeholderklasi un režģa kolonnas klasi (piemēram, .col-6), lai iestatītu width. Tie var aizstāt tekstu elementā vai pievienot kā modifikatoru klasi esošam komponentam.

Mēs izmantojam papildu stilu .btns via ::before, lai nodrošinātu, ka heighttiek ievērots. Varat paplašināt šo modeli citām situācijām, ja nepieciešams, vai pievienot  elementam, lai atspoguļotu augstumu, kad faktiskais teksts tiek renderēts tā vietā.

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>

Izmantošana aria-hidden="true"tikai norāda, ka elements ir jāpaslēpj ekrāna lasītājos. Viettura ielādes darbība ir atkarīga no tā, kā autori faktiski izmantos vietturu stilus, kā viņi plāno atjaunināt lietas utt. Var būt nepieciešams JavaScript kods, lai apmainītu viettura stāvokli un informētu AT lietotājus par atjauninājumu.

Platums

Varat mainīt widthcaurlaides režģa kolonnu klases, platuma utilītas vai iekļautos stilus.

html

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

Krāsa

Pēc noklusējuma placeholderizmanto currentColor. To var ignorēt, izmantojot pielāgotu krāsu vai lietderības klasi.

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>

Izmēru noteikšana

S lielums .placeholderir balstīts uz vecākelementa tipogrāfisko stilu. Pielāgojiet tos, izmantojot izmēru modifikatorus: .placeholder-lg, .placeholder-sm, vai .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>

Animācija

Animējiet vietturus ar .placeholder-glowvai .placeholder-wavelai labāk atspoguļotu priekšstatu par kaut ko aktīvu ielādi.

html

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

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

Sass

Mainīgie

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