Placeholders

Gunakake placeholder loading kanggo komponen utawa kaca sampeyan kanggo nunjukake ana sing isih dimuat.

Ing kaca iki

Babagan

Placeholder bisa digunakake kanggo nambah pengalaman aplikasi sampeyan. Dheweke mung dibangun nganggo HTML lan CSS, tegese sampeyan ora butuh JavaScript kanggo nggawe. Nanging, sampeyan butuh JavaScript khusus kanggo ngalih visibilitas. Penampilan, warna, lan ukurane bisa gampang disesuaikan karo kelas utilitas.

Tuladha

Ing conto ing ngisor iki, kita njupuk komponen kertu khas lan nggawé ulang karo placeholders Applied kanggo nggawe "loading kertu". Ukuran lan proporsi padha antarane loro.

Judhul kertu

Sawetara teks conto cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Menyang ngendi wae

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

Cara kerjane

Nggawe placeholder karo .placeholderkelas lan kelas kolom kothak (contone, .col-6) kanggo nyetel width. Bisa ngganti teks ing unsur utawa ditambahake minangka kelas modifier kanggo komponen sing wis ana.

We aplikasi noto tambahan kanggo .btns liwat ::beforekanggo mesthekake ing heightdihormati. Sampeyan bisa ngluwihi pola iki kanggo kahanan liyane yen perlu, utawa nambah  ing unsur kanggo nggambarake dhuwur nalika teks nyata render ing panggonan.

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>

Panggunaan aria-hidden="true"mung nuduhake yen unsur kudu didhelikake kanggo nonton layar. Prilaku loading placeholder gumantung carane penulis bener bakal nggunakake gaya placeholder, carane padha rencana kanggo nganyari iku, etc. Sawetara kode JavaScript bisa uga dibutuhake kanggo ngganti negara placeholder lan ngandhani pangguna AT nganyari.

Jembar

Sampeyan bisa ngganti widthkelas kolom kothak liwat, utilitas jembar, utawa gaya inline.

html

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

warna

Kanthi gawan, placeholderpanggunaan currentColor. Iki bisa diganti karo werna khusus utawa kelas sarana.

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>

ukuran

Ukuran .placeholders adhedhasar gaya tipografi unsur induk. Kustomisasi nganggo modifier ukuran: .placeholder-lg, .placeholder-sm, utawa .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>

Animasi

Animasi placeholder kanthi .placeholder-glowutawa .placeholder-waveluwih apik kanggo menehi persepsi babagan sing dimuat kanthi aktif .

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Variabel

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;