Helyőrzők
Használjon betöltési helyőrzőket az összetevőkhez vagy oldalakhoz, hogy jelezze, valami még mindig betöltés alatt áll.
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 .placeholder
osztá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 .btn
s via -n ::before
, hogy biztosítsuk a height
betartá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ére kerül.
<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>
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.
<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 placeholder
a currentColor
. Ez felülírható egyéni színnel vagy használati osztályokkal.
<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 .placeholder
s-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
.
<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-glow
hogy .placeholder-wave
jobban érzékeltesse, hogy valami aktívan betöltődik.
<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;