Pemegang tempat

Gunakan ruang letak pemuatan untuk komponen atau halaman anda untuk menunjukkan sesuatu mungkin masih dimuatkan.

Pada halaman ini

Tentang

Pemegang tempat boleh digunakan untuk meningkatkan pengalaman aplikasi anda. Ia dibina hanya dengan HTML dan CSS, bermakna anda tidak memerlukan sebarang JavaScript untuk menciptanya. Walau bagaimanapun, anda memerlukan beberapa JavaScript tersuai untuk menogol keterlihatan mereka. Penampilan, warna dan saiznya boleh disesuaikan dengan mudah dengan kelas utiliti kami.

Contoh

Dalam contoh di bawah, kami mengambil komponen kad biasa dan menciptanya semula dengan pemegang tempat digunakan untuk mencipta "kad pemuatan". Saiz dan perkadaran adalah sama antara keduanya.

Tajuk kad

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

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

Cipta ruang letak dengan .placeholderkelas dan kelas lajur grid (cth, .col-6) untuk menetapkan width. Mereka boleh menggantikan teks di dalam elemen atau ditambah sebagai kelas pengubah suai kepada komponen sedia ada.

Kami menggunakan penggayaan tambahan pada .btns via ::beforeuntuk memastikan heightdihormati. Anda boleh memanjangkan corak ini untuk situasi lain seperti yang diperlukan, atau menambah  dalam elemen untuk mencerminkan ketinggian apabila teks sebenar diberikan pada 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 bahawa elemen harus disembunyikan kepada pembaca skrin. Gelagat pemuatan pemegang tempat bergantung pada cara pengarang sebenarnya akan menggunakan gaya pemegang tempat, cara mereka merancang untuk mengemas kini sesuatu, dsb. Sesetengah kod JavaScript mungkin diperlukan untuk menukar keadaan pemegang tempat dan memaklumkan kepada pengguna AT tentang kemas kini.

Lebar

Anda boleh menukar widthkelas lajur grid melalui, utiliti 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 lalai, placeholderpenggunaan currentColor. Ini boleh diganti dengan warna tersuai atau 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>

Saiz

Saiz .placeholders adalah berdasarkan gaya tipografi unsur induk. Sesuaikan mereka dengan pengubah suai saiz: .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

Animasikan ruang letak dengan .placeholder-glowatau .placeholder-waveuntuk menyampaikan persepsi dengan lebih baik tentang sesuatu yang dimuatkan 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>

Sass

Pembolehubah

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