Patempatan

Anggo pananda tempat ngamuat pikeun komponén atanapi halaman anjeun pikeun nunjukkeun yén aya anu masih kénéh dimuat.

Dina kaca ieu

Ngeunaan

Placeholders tiasa dianggo pikeun ningkatkeun pangalaman aplikasi anjeun. Éta ngan ukur diwangun ku HTML sareng CSS, hartosna anjeun henteu peryogi JavaScript pikeun nyiptakeunana. Anjeun bakal kitu, perlu sababaraha custom JavaScript mun toggle pisibilitas maranéhanana. Penampilan, warna, sareng ukuranana tiasa gampang disaluyukeun sareng kelas utiliti urang.

Contona

Dina conto di handap, urang nyokot komponén kartu has jeung nyieun deui kalawan placeholders dilarapkeun ka nyieun "kartu loading". Ukuran jeung babandingan anu sarua antara dua.

Judul kartu

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

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

Kumaha gawéna

Jieun pananda tempat sareng .placeholderkelas sareng kelas kolom grid (contona, .col-6) pikeun nyetél width. Éta bisa ngaganti téks dina unsur atawa ditambahkeun salaku kelas modifier kana komponén aya.

Urang nerapkeun styling tambahan pikeun .btns via ::beforepikeun mastikeun nu heightdimangfaatkeun. Anjeun tiasa ngalegaan pola ieu pikeun kaayaan anu sanés upami diperyogikeun, atanapi tambahkeun  unsur dina unsur pikeun ngagambarkeun jangkungna nalika téks saleresna didamel dina tempatna.

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>

Pamakéan aria-hidden="true"ukur nunjukkeun yén unsur kudu disumputkeun ka layar pamiarsa. Paripolah loading placeholder gumantung kana kumaha pangarang sabenerna bakal ngagunakeun gaya placeholder, kumaha aranjeunna rencanana pikeun ngamutahirkeun hal, jsb Sababaraha kode JavaScript bisa jadi diperlukeun pikeun swap kaayaan placeholder tur ngawartosan pamaké AT update teh.

Lebar

Anjeun tiasa ngarobih widthkelas kolom grid, utilitas lebar, atanapi gaya inline.

html

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

Warna

Sacara standar, placeholderkagunaan currentColor. Ieu tiasa ditindih ku warna khusus atanapi kelas utiliti.

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 dumasar kana gaya tipografi unsur indungna. Sesuaikeun sareng pangubah ukuran: .placeholder-lg, .placeholder-sm, atanapi .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

Ngahirupkeun pananda tempat nganggo .placeholder-glowatanapi .placeholder-wavepikeun langkung saé nepikeun persepsi ngeunaan hiji hal anu aktip dimuat.

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;