Vietos žymos
Norėdami nurodyti, kad kažkas vis dar gali būti įkeliama, naudokite savo komponentų ar puslapių įkėlimo vietos rezervavimo ženklus.
Apie
Vietos žymekliai gali būti naudojami siekiant pagerinti jūsų programos patirtį. Jie sukurti tik naudojant HTML ir CSS, o tai reiškia, kad jiems sukurti nereikia jokio JavaScript. Tačiau jums reikės tam tikro tinkinto „JavaScript“, kad perjungtumėte jų matomumą. Jų išvaizdą, spalvą ir dydį galima lengvai pritaikyti pagal mūsų naudingumo klases.
Pavyzdys
Toliau pateiktame pavyzdyje paimame tipinį kortelės komponentą ir iš naujo sukuriame jį naudodami vietos rezervavimo ženklus, kad sukurtume „įkėlimo kortelę“. Dydis ir proporcijos yra vienodos tarp dviejų.
Kortelės pavadinimas
Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.
Eik kur nors<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>
Kaip tai veikia
Sukurkite vietos rezervavimo ženklus su .placeholder
klase ir tinklelio stulpelio klase (pvz., .col-6
), kad nustatytumėte width
. Jie gali pakeisti tekstą elemento viduje arba pridėti kaip modifikavimo klasę prie esamo komponento.
Siekdami užtikrinti, kad būtų laikomasi .btn
s via , taikome papildomą stilių . Jei reikia, galite išplėsti šį šabloną kitoms situacijoms arba pridėti elementą, kad atspindėtų aukštį, kai tikrasis tekstas pateikiamas jo vietoje.::before
height
<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"
tik reiškia, kad elementas turi būti paslėptas ekrano skaitytuvuose. Vietos
žymeklio įkėlimas priklauso nuo to, kaip autoriai iš tikrųjų naudos rezervuotos vietos stilius, kaip jie planuoja atnaujinti dalykus ir tt Gali prireikti JavaScript kodo, kad
būtų pakeista rezervuotos vietos žymeklio būsena ir informuojami AT naudotojai apie atnaujinimą.
Plotis
Galite keisti width
tinklelio stulpelių klases, pločio įrankius arba eilutinius stilius.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Spalva
Pagal numatytuosius nustatymus placeholder
naudoja currentColor
. Tai gali būti pakeista pasirinkta spalva arba naudingumo klase.
<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>
Dydžio nustatymas
S dydis .placeholder
yra pagrįstas pirminio elemento tipografiniu stiliumi. Tinkinkite juos naudodami dydžio modifikatorius: .placeholder-lg
, .placeholder-sm
, arba .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>
Animacija
Suaktyvinkite vietos žymeklius su .placeholder-glow
arba .placeholder-wave
geriau perteikite suvokimą, kad kažkas aktyviai įkeliama.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Kintamieji
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;