Placeholder

Gunakan tempat penampung pemuatan untuk komponen atau halaman Anda untuk menunjukkan sesuatu yang mungkin masih dimuat.

Di halaman ini

Tentang

Placeholder dapat digunakan untuk meningkatkan pengalaman aplikasi Anda. Mereka dibuat hanya dengan HTML dan CSS, artinya Anda tidak memerlukan JavaScript apa pun untuk membuatnya. Namun, Anda akan memerlukan beberapa JavaScript khusus untuk mengaktifkan visibilitasnya. Penampilan, warna, dan ukurannya dapat dengan mudah disesuaikan dengan kelas utilitas kami.

Contoh

Dalam contoh di bawah ini, kami mengambil komponen kartu biasa dan membuatnya kembali dengan placeholder yang diterapkan untuk membuat "kartu pemuatan". Ukuran dan proporsi keduanya sama.

Judul kartu

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Pergi ke suatu tempat

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

Bagaimana itu bekerja

Buat placeholder dengan .placeholderkelas dan kelas kolom kisi (misalnya, .col-6) untuk mengatur width. Mereka dapat mengganti teks di dalam elemen atau ditambahkan sebagai kelas pengubah ke komponen yang ada.

Kami menerapkan gaya tambahan ke .btns via ::beforeuntuk memastikan heightdihormati. Anda dapat memperluas pola ini untuk situasi lain sesuai kebutuhan, atau menambahkan a  di dalam elemen untuk mencerminkan ketinggian saat teks aktual dirender di tempatnya.

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>

Penggunaan aria-hidden="true"hanya menunjukkan bahwa elemen harus disembunyikan ke pembaca layar. Perilaku pemuatan placeholder tergantung pada bagaimana penulis akan benar-benar menggunakan gaya placeholder, bagaimana mereka berencana untuk memperbarui sesuatu, dll. Beberapa kode JavaScript mungkin diperlukan untuk menukar status placeholder dan memberi tahu pengguna AT tentang pembaruan.

Lebar

Anda dapat mengubah widthkelas kolom petak, utilitas lebar, atau gaya sebaris.

html

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

Warna

Secara default, placeholdermenggunakan currentColor. Ini dapat diganti dengan warna kustom atau kelas utilitas.

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>

Perekat

Ukuran .placeholders didasarkan pada gaya tipografi elemen induk. Sesuaikan dengan pengubah ukuran: .placeholder-lg, .placeholder-sm, atau .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

Menganimasikan placeholder dengan .placeholder-glowatau .placeholder-waveuntuk menyampaikan persepsi dengan lebih baik tentang sesuatu yang sedang dimuat secara aktif .

html

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

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

Kelancangan

Variabel

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