Mga placeholder

Gamita ang pagkarga sa mga placeholder para sa imong mga sangkap o mga panid aron ipakita nga adunay nagkarga pa.

Niini nga panid

Mahitungod sa

Mahimong gamiton ang mga placeholder aron mapalambo ang kasinatian sa imong aplikasyon. Gitukod lang kini gamit ang HTML ug CSS, nagpasabot nga dili nimo kinahanglan ang bisan unsang JavaScript sa paghimo niini. Hinuon, kinahanglan nimo ang pipila ka naandan nga JavaScript aron i-toggle ang ilang visibility. Ang ilang hitsura, kolor, ug gidak-on dali nga mapasibo sa among mga klase sa utility.

Pananglitan

Sa panig-ingnan sa ubos, nagkuha kami usa ka sagad nga sangkap sa kard ug gi-recreate kini gamit ang mga placeholder nga gigamit aron makahimo usa ka "loading card". Ang gidak-on ug proporsiyon parehas sa duha.

Titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Lakaw sa usa ka dapit

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

Giunsa kini paglihok

Paghimo og mga placeholder nga adunay .placeholderklase ug usa ka klase sa kolum sa grid (pananglitan, .col-6) aron itakda ang width. Mahimo nilang pulihan ang teksto sa sulod sa usa ka elemento o idugang ingon usa ka klase sa modifier sa usa ka kasamtangan nga sangkap.

Nag-apply kami og dugang nga pag-istilo sa .btns via ::beforearon masiguro nga heightang gitahud. Mahimo nimong i-extend kini nga pattern alang sa ubang mga sitwasyon kung gikinahanglan, o pagdugang og  sulod sa elemento aron mapakita ang gitas-on kung ang aktuwal nga teksto gihubad sa lugar niini.

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 sa aria-hidden="true"nagpakita lamang nga ang elemento kinahanglang itago sa screen readers. Ang kinaiya sa pagkarga sa placeholder nagdepende kon giunsa paggamit sa mga tagsulat ang mga estilo sa placeholder, giunsa nila pagplano ang pag-update sa mga butang, ug uban pa. Mahimong gikinahanglan ang pipila ka JavaScript code aron ibaylo ang kahimtang sa placeholder ug ipahibalo ang mga tiggamit sa AT sa update.

Lapad

Mahimo nimong usbon ang widththrough grid column classes, width utilities, o inline nga mga estilo.

html

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

Kolor

Sa kasagaran, ang mga placeholdergamit currentColor. Mahimo kining ma-overridden sa usa ka custom nga kolor o utility nga klase.

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>

Pagsukod

Ang gidak-on sa .placeholders gibase sa typographic nga estilo sa ginikanan nga elemento. Ipasibo kini gamit ang mga modifier sa gidak-on: .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 nga adunay .placeholder-glowo .placeholder-wavearon mas maayo nga ipahayag ang panglantaw sa usa ka butang nga aktibo nga gikarga.

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;