Mga placeholder
Gumamit ng mga placeholder sa paglo-load para sa iyong mga bahagi o pahina upang isaad ang isang bagay na maaaring naglo-load pa rin.
Tungkol sa
Maaaring gamitin ang mga placeholder upang mapahusay ang karanasan ng iyong aplikasyon. Binuo lang ang mga ito gamit ang HTML at CSS, ibig sabihin, hindi mo kailangan ng anumang JavaScript upang gawin ang mga ito. Gayunpaman, kakailanganin mo ng ilang custom na JavaScript upang i-toggle ang kanilang visibility. Ang kanilang hitsura, kulay, at sukat ay madaling ma-customize sa aming mga klase ng utility.
Halimbawa
Sa halimbawa sa ibaba, kumukuha kami ng tipikal na bahagi ng card at muling likhain ito gamit ang mga placeholder na inilapat upang lumikha ng "loading card." Ang laki at sukat ay pareho sa pagitan ng dalawa.
Pamagat ng card
Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.
Pumunta sa isang lugar<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>
Paano ito gumagana
Lumikha ng mga placeholder na may .placeholder
klase at isang grid column class (hal, .col-6
) upang itakda ang width
. Maaari nilang palitan ang teksto sa loob ng isang elemento o maidagdag bilang klase ng modifier sa isang umiiral na bahagi.
Naglalapat kami ng karagdagang pag-istilo sa .btn
s via ::before
upang matiyak na height
iginagalang ang. Maaari mong palawigin ang pattern na ito para sa iba pang mga sitwasyon kung kinakailangan, o magdagdag ng isang
sa loob ng elemento upang ipakita ang taas kapag ang aktwal na teksto ay nai-render sa lugar nito.
<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"
ay nagpapahiwatig lamang na ang elemento ay dapat itago sa mga screen reader. Ang
pag-uugali ng paglo -load ng placeholder ay depende sa kung paano aktwal na gagamitin ng mga may-akda ang mga istilo ng placeholder, kung paano nila pinaplanong i-update ang mga bagay, atbp. Maaaring kailanganin ang ilang JavaScript code upang
palitan ang estado ng placeholder at ipaalam sa mga user ng AT ang update.
Lapad
Maaari mong baguhin ang width
through grid column classes, width utilities, o inline na mga istilo.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Kulay
Bilang default, ang mga placeholder
gamit currentColor
. Maaari itong ma-override ng isang custom na kulay o klase ng utility.
<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>
Pagsusukat
Ang laki ng .placeholder
s ay batay sa typographic na istilo ng parent na elemento. I-customize ang mga ito gamit ang mga modifier ng sukat: .placeholder-lg
, .placeholder-sm
, o .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>
Animasyon
I-animate ang mga placeholder gamit .placeholder-glow
o .placeholder-wave
para mas maiparating ang perception ng isang bagay na aktibong nilo- load.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Mga variable
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;