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.

Sa pahinang ito

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 .placeholderklase at isang grid column class (hal, .col-6) upang itakda ang width. Maaari nilang palitan ang teksto sa loob ng isang elemento o idagdag bilang klase ng modifier sa isang umiiral na bahagi.

Naglalapat kami ng karagdagang pag-istilo sa .btns via ::beforeupang matiyak na heightiginagalang 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.

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>

Ang paggamit ng 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 widththrough grid column classes, width utilities, o inline na mga istilo.

html

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

Kulay

Bilang default, ang mga placeholdergamit currentColor. Maaari itong ma-override ng isang custom na kulay o klase ng utility.

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>

Pagsusukat

Ang laki ng .placeholders 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.

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>

Animasyon

I-animate ang mga placeholder gamit .placeholder-glowo .placeholder-wavepara mas maiparating ang perception ng isang bagay na aktibong nilo- load.

html

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