Yer Tutucu
Hakkında
Yer tutucular, uygulamanızın deneyimini geliştirmek için kullanılabilir. Sadece HTML ve CSS ile oluşturulmuşlardır, bu nedenle bunları oluşturmak için hiçbir JavaScript'e ihtiyacınız yoktur. Ancak, görünürlüklerini değiştirmek için bazı özel JavaScript'e ihtiyacınız olacak. Görünüm, renk ve boyutları, yardımcı sınıflarımızla kolayca özelleştirilebilir.
Örnek
Aşağıdaki örnekte, tipik bir kart bileşenini alıyor ve yer tutucularla "yükleme kartı" oluşturmak için yeniden oluşturuyoruz. Boyut ve oranlar her iki bileşen için aynıdır.
Kart başlığı
Kart başlığını oluşturmak ve kartın içeriğini oluşturan 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">Kart başlığı</h5>
<p class="card-text">Kart başlığını oluşturmak ve kartın içeriğini oluşturan bazı hızlı örnek metinler.</p>
<a href="#" class="btn btn-primary">Bir yere git</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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
Yer tutucular, içerik yüklenirken kullanıcıların bekleme süresini hissettirmemek için etkili bir yöntemdir.
Nasıl çalışır
Yer tutucuları, width
'i ayarlamak için .placeholder
sınıfını ve bir grid kolon sınıfını (örneğin, .col-6
) kullanarak oluşturun. Bir öğeden içindeki metni değiştirebilir veya mevcut bir bileşene modifiye sınıfı olarak ekleyebilirsiniz.
.btn
'lere ::before
ile ek stil uyguluyoruz, böylece height
saygı gösterilir. Bu kalıbı ihtiyaç duyduğunuz diğer durumlar için genişletebilir veya gerçek metin yerleştirildiğinde yüksekliği yansıtmak için öğe içine bir
ekleyebilirsiniz.
aria-hidden="true"
kullanımı, yalnızca öğenin ekran okuyucular için gizli olmasını sağlar. Yer tutucunun yükleme davranışı, yazarların yer tutucu stillerini nasıl kullanacağına, güncellemeyi nasıl 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
'i grid kolon sınıfları, genişlik yardımcı sınıfları veya satır içi stiller aracılığıyla değiştirebilirsiniz.
Renk
Varsayılan olarak, placeholder
currentColor
kullanır. Bu, özel bir renk veya yardımcı sınıf ile geçersiz kılınabilir.
{{- range (index $.Site.Data "theme-colors") }}
{{- end -}}
Boyutlandırma
.placeholder
'ların boyutu, üst öğenin tipografik stiline dayanmaktadır. Bunları boyutlandırma modifiyerlarıyla özelleştirin: .placeholder-lg
, .placeholder-sm
, veya .placeholder-xs
.
Animasyon
Yer tutucuları, bir şeyin aktif olarak yüklendiğini daha iyi iletmek için .placeholder-glow
veya .placeholder-wave
ile animasyon yapın.