Pemegang tempat
Gunakan ruang letak pemuatan untuk komponen atau halaman anda untuk menunjukkan sesuatu mungkin masih dimuatkan.
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 .placeholder
kelas 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 .btn
s via ::before
untuk memastikan height
dihormati. Anda boleh memanjangkan corak ini untuk situasi lain mengikut keperluan, atau menambah
dalam elemen untuk mencerminkan ketinggian apabila teks sebenar diberikan pada tempatnya.
<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>
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. Beberapa kod JavaScript mungkin diperlukan untuk
menukar keadaan pemegang tempat dan memaklumkan kepada pengguna AT tentang kemas kini.
Lebar
Anda boleh menukar width
kelas lajur grid melalui, utiliti lebar atau gaya sebaris.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Warna
Secara lalai, placeholder
penggunaan currentColor
. Ini boleh diganti dengan warna tersuai atau kelas utiliti.
<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 .placeholder
s adalah berdasarkan gaya tipografi unsur induk. Sesuaikan mereka dengan pengubah suai saiz: .placeholder-lg
, .placeholder-sm
, atau .placeholder-xs
.
<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-glow
atau .placeholder-wave
untuk menyampaikan persepsi dengan lebih baik tentang sesuatu yang dimuatkan secara aktif .
<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;