Helyőrzők

Használjon betöltési helyőrzőket az összetevőkhez vagy oldalakhoz, hogy jelezze, hogy valami még mindig betöltődik.

Ezen az oldalon

Ról ről

A helyőrzők segítségével javíthatja az alkalmazás élményét. Csak HTML és CSS használatával készültek, ami azt jelenti, hogy nincs szükség JavaScriptre a létrehozásukhoz. A láthatóságuk váltásához azonban szüksége lesz néhány egyéni JavaScriptre. Megjelenésük, színük és méretük könnyen testreszabható használati osztályainkkal.

Példa

Az alábbi példában veszünk egy tipikus kártyakomponenst, és újra létrehozzuk a „betöltőkártya” létrehozásához alkalmazott helyőrzőkkel. A méret és az arányok megegyeznek a kettő között.

Kártya címe

Néhány gyors példaszöveg a kártya címére építve, és a kártya tartalmának nagy részét alkotja.

Elmenni valahova

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

Hogyan működik

Hozzon létre helyőrzőket az .placeholderosztállyal és egy rácsoszlop osztállyal (pl. .col-6) a beállításához width. Lecserélhetik az elemen belüli szöveget, vagy módosító osztályként hozzáadhatók egy meglévő összetevőhöz.

További stílust alkalmazunk az .btns via -n ::before, hogy biztosítsuk a heightbetartását. Szükség szerint kiterjesztheti ezt a mintát más helyzetekre, vagy hozzáadhat egy  elemet az elemen belül, hogy tükrözze azt a magasságot, amikor a tényleges szöveg a helyén jelenik meg.

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>

A használata aria-hidden="true"csak azt jelzi, hogy az elemet el kell rejteni a képernyőolvasók előtt. A helyőrző betöltési viselkedése attól függ, hogy a szerzők ténylegesen hogyan fogják használni a helyőrző stílusokat, hogyan tervezik frissíteni a dolgokat stb. Szükség lehet némi JavaScript kódra a helyőrző állapotának felcseréléséhez és az AT-felhasználók tájékoztatásához a frissítésről.

Szélesség

Módosíthatja az widthátmenő rács oszloposztályait, a szélességi segédprogramokat vagy a soron belüli stílusokat.

html

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

Szín

Alapértelmezés szerint placeholdera currentColor. Ez felülírható egyéni színnel vagy használati osztályokkal.

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>

Méretezés

Az .placeholders-ek mérete a szülőelem tipográfiai stílusán alapul. Testreszabhatja őket méretmódosítókkal: .placeholder-lg, .placeholder-sm, vagy .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>

Élénkség

Animálja a helyőrzőket úgy, .placeholder-glowhogy .placeholder-wavejobban érzékeltesse, hogy valami aktívan betöltődik.

html

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

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

Sass

Változók

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