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.

Bu sayfada

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

.placeholderayarlamak 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 .btns 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.::beforeheight 

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>

Yalnızca kullanımı 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

widthIzgara sütun sınıflarını, genişlik yardımcı programlarını veya satır içi stilleri değiştirebilirsiniz .

html

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

Renk

Varsayılan olarak, placeholderkullanır currentColor. Bu, özel bir renk veya yardımcı program sınıfıyla geçersiz kılınabilir.

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>

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.

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>

Animasyon

Aktif olarak yüklenen bir şey algısını daha iyi iletmek .placeholder-glowveya daha iyi iletmek için yer tutucuları canlandırın ..placeholder-wave

html

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