yer tutucular
Bir şeyin hala yüklenmekte olduğunu belirtmek için bileşenleriniz veya sayfalarınız için yükleme yer tutucularını kullanın.
Hakkında
Yer tutucular, uygulamanızın deneyimini geliştirmek için kullanılabilir. Yalnızca HTML ve CSS ile oluşturulmuştur, yani bunları oluşturmak için herhangi bir JavaScript'e ihtiyacınız yoktur. Bununla birlikte, görünürlüklerini değiştirmek için bazı özel JavaScript'e ihtiyacınız olacak. Görünümleri, renkleri ve boyutları, faydalı sınıflarımızla kolayca özelleştirilebilir.
Örnek
Aşağıdaki örnekte, tipik bir kart bileşeni alıyoruz ve onu bir "yükleme kartı" oluşturmak için uygulanan yer tutucularla yeniden oluşturuyoruz. Boyut ve oranlar ikisi arasında aynıdır.
Kart başlığı
Kart başlığını oluşturacak ve kart içeriğinin büyük kısmını oluşturacak bazı hızlı örnek metinler.
Bir yere git<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>
Nasıl çalışır
.placeholder
ayarlamak için sınıf ve ızgara sütun sınıfı (örn. .col-6
) ile yer tutucular oluşturun width
. Bir öğenin içindeki metni değiştirebilir veya mevcut bir bileşene değiştirici sınıf olarak eklenebilirler.
Buna saygı gösterilmesini sağlamak için .btn
s via'ya ek stil uygularız . Bu kalıbı gerektiği gibi diğer durumlar için genişletebilir veya gerçek metin yerine işlendiğinde yüksekliği yansıtmak için öğenin içine bir ekleyebilirsiniz.::before
height
<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"
, öğenin ekran okuyuculara gizlenmesi gerektiğini belirtir. Yer
tutucunun yükleme davranışı, yazarların yer tutucu stillerini gerçekte nasıl kullanacaklarına, şeyleri nasıl güncellemeyi planladıklarına vb. bağlıdır. Yer tutucunun durumunu değiştirmek ve AT kullanıcılarını güncelleme hakkında bilgilendirmek için
bazı JavaScript kodları gerekebilir
.Genişlik
width
Izgara sütun sınıflarını, genişlik yardımcı programlarını veya satır içi stilleri değiştirebilirsiniz .
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Renk
Varsayılan olarak, placeholder
kullanır currentColor
. Bu, özel bir renk veya yardımcı program sınıfıyla geçersiz kılınabilir.
<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>
boyutlandırma
s'nin boyutu .placeholder
, ana öğenin tipografik stiline bağlıdır. Boyut değiştiricileri ile özelleştirin: .placeholder-lg
, .placeholder-sm
, veya .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>
Animasyon
Aktif olarak yüklenen bir şey algısını daha iyi iletmek .placeholder-glow
veya daha iyi iletmek için yer tutucuları canlandırın ..placeholder-wave
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
küstah
Değişkenler
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;