Bootstrap 5 Badge ve Spinner: Sayaç Etiketleri ve Yükleniyor Göstergesi

Badge nasıl boyutlanır?

Badge sabit bir piksel boyutu kullanmaz; yazı boyutu ve dolgusu em cinsindendir, yani içinde bulunduğu öğenin yazı boyutuna göre ölçeklenir. Bir <h1> içindeki badge büyük, bir paragraf içindeki küçük görünür. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf şöyle tanımlıdır:

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

Buradan birkaç sonuç çıkar. font-size: 0.75em, badge'in metni ana metnin dörtte üçü boyutunda tutmasını sağlar. white-space: nowrap badge'in içindeki kelimelerin alt satıra kırılmasını engeller. Varsayılan metin rengi beyazdır; bu yüzden açık bir zemin seçtiğinizde metin rengini de değiştirmeniz gerekir. Kaynak kodda iki küçük kural daha vardır: içi boş bir badge :empty seçicisiyle display: none alır, yani boş sayaç kendiliğinden gizlenir; buton içindeki badge de (.btn .badge) hizayı düzeltmek için 1px yukarı kaydırılır.

<h2>Yeni özellikler <span class="badge bg-secondary">Yeni</span></h2>
<p>Bu ay eklenen sürüm notları <span class="badge bg-success">Güncel</span></p>

Renkler ve hap biçimi

v5'te badge'in kendi renk sınıfları yoktur. Geçiş belgesine göre v4'teki .badge-primary gibi bütün .badge-* renk sınıfları kaldırıldı ve yerlerine arka plan yardımcıları geldi: .bg-primary, .bg-danger ve diğerleri. Aynı şekilde .badge-pill kaldırıldı; daha yuvarlak bir badge için .rounded-pill yardımcısı kullanılır. Derlenmiş CSS'te bu yardımcı border-radius: 50rem !important verir.

<span class="badge bg-primary">Primary</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Hap biçimi</span>

Belgeler açık zeminli badge'lerde .text-dark gibi bir metin rengi yardımcısına ihtiyaç duyacağınızı açıkça yazar ve nedenini de verir: arka plan yardımcıları background-color dışında hiçbir şey ayarlamaz. Belgelerin kendi örneğinde warning, info ve light badge'ler bu yüzden text-dark ile kullanılır. Renk yardımcılarının tamamı Bootstrap renk sınıfları, köşe yardımcıları border ve rounded yazısında.

Geçiş belgesinin badge için not ettiği iki değişiklik daha var: <a> ve <button> içindeki badge'ler için üzerine gelme ve odak stilleri kaldırıldı, varsayılan dolgu da .25em/.5em değerinden .35em/.65em değerine çıkarıldı. v4 projesini taşıyorsanız badge'lerin biraz daha geniş görünmesi bu yüzdendir; diğer farklar geçiş rehberinde.

Butonda sayaç ve ekran okuyucu bağlamı

Badge bir buton ya da bağlantının içine konarak sayaç gibi kullanılabilir. Belgeler burada bir erişilebilirlik uyarısı yapar: görsel kullanıcı badge'in bir sayaç olduğunu biçiminden anlar, ama ekran okuyucu kullanıcısı yalnızca içindeki metni duyar. "Bildirimler 4" anlaşılırdır; ancak bağlam açık değilse sayı cümlenin sonuna eklenmiş anlamsız bir kelime gibi gelebilir. Böyle durumlarda .visually-hidden ile görünmeyen bir açıklama ekleyin.

<button type="button" class="btn btn-primary">
  Mesajlar <span class="badge bg-light text-dark">7</span>
  <span class="visually-hidden">okunmamış mesaj</span>
</button>

.visually-hidden derlenmiş CSS'te öğeyi 1px boyutuna indirip kırpar ama sayfadan kaldırmaz; böylece metin görünmez, yine de yardımcı teknolojiler tarafından okunur. Bu yardımcının ayrıntıları Bootstrap erişilebilirlik yazısında.

Köşeye konumlandırılmış badge ve bildirim noktası

Bildirim simgelerinde sık görülen "köşedeki kırmızı sayı" görünümü için badge'e konumlandırma yardımcıları eklenir. Kalıp şöyle çalışır: kapsayıcı butona .position-relative verilir; badge .position-absolute ile butona göre konumlanır, top-0 start-100 onu sağ üst köşeye taşır ve .translate-middle (transform: translate(-50%, -50%)) öğeyi o noktanın tam ortasına kaydırır.

<button type="button" class="btn btn-primary position-relative">
  Gelen kutusu
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">okunmamış mesaj</span>
  </span>
</button>

<button type="button" class="btn btn-secondary position-relative">
  Profil
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">Yeni uyarılar var</span>
  </span>
</button>

İkinci örnekte .badge sınıfı hiç kullanılmaz. Sayı göstermeyen genel bir "yeni" noktası için belgeler badge yerine birkaç yardımcıyı birleştirir: p-2 noktaya boyut verir, rounded-circle onu daire yapar, border border-light de butonun zemininden ayıran ince bir çerçeve çizer. Buradaki .visually-hidden metni çok önemlidir, çünkü noktanın görsel dışında hiçbir anlamı yoktur. Konumlandırma yardımcılarının tamamı position sınıfları yazısında.

Spinner: JavaScript'siz yükleniyor göstergesi

Spinner'lar yalnızca HTML ve CSS ile çalışır; çizim ve animasyon için JavaScript gerekmez. Ancak belgeler, spinner'ı ne zaman gösterip gizleyeceğinizi kendi JavaScript kodunuzla yönetmeniz gerektiğini not eder. Bootstrap bir isteğin ne zaman başlayıp bittiğini bilmez. Belgelerdeki her örnekte role="status" ve içte <span class="visually-hidden"> ile bir "Yükleniyor..." metni bulunur.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Yükleniyor...</span>
</div>

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Yükleniyor...</span>
</div>

Kaynak koddaki _spinners.scss iki türün farkını açıkça gösterir. .spinner-border, kalınlığı 0.25em olan ve currentColor kullanan bir kenarlık çizer, sağ kenarı şeffaf bırakır ve spinner-border animasyonuyla 0.75 saniyede bir tam tur döner. .spinner-grow ise kenarlık yerine currentColor ile dolu bir daire çizer ve spinner-grow animasyonuyla sıfırdan büyüyüp söner; belgelerin deyişiyle aslında dönmez, tekrar tekrar büyür. İkisinin de varsayılan boyutu 2rem'dir.

Hangisini seçeceğiniz tamamen görsel bir tercihtir; belgeler halka spinner'ı hafif bir yükleniyor göstergesi olarak tanıtır, büyüyen spinner'ı ise bunun bir alternatifi olarak sunar. Bir arayüzde tek bir türü tutarlı biçimde kullanmak, kullanıcının bekleme durumunu her ekranda aynı işaretle tanımasını kolaylaştırır. Küçük bir ayrıntı: büyüyen spinner temel durumda opacity: 0 ile başlar ve görünürlüğü animasyondan gelir. Bu yüzden animasyonu kendi CSS'inizle kapatırsanız büyüyen spinner tamamen görünmez olur; halka spinner ise yalnızca dönmeyi bırakır.

Spinner rengi: neden border-color değil?

Spinner'lar currentColor kullandığı için renkleri metin rengi yardımcılarıyla değiştirilir: text-primary, text-success, text-danger ve diğerleri. Belgeler bu noktada sık yapılan bir hatayı da önceden yanıtlar: .border-primary gibi kenarlık rengi yardımcıları kullanmayın. Halka spinner'ının en az bir kenarı şeffaftır ve dönme görüntüsü bu boşluktan oluşur; kenarlık rengi yardımcısı bu şeffaf kenarı da ezer ve dönme görüntüsünü oluşturan boşluk kaybolur.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Yükleniyor...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Yükleniyor...</span>
</div>

Hizalama ve boyut

Spinner'lar rem, currentColor ve satır içi görüntülemeyle kurulduğu için yardımcı sınıflarla kolayca hizalanır. Belgeler dört yolu gösterir: boşluk için m-5 gibi margin yardımcıları, ortalamak için d-flex justify-content-center ya da text-center sarmalayıcı, sağa yaslamak için .clearfix içinde float-end. Metnin yanında sağa itilen bir spinner için flex kapsayıcı içinde ms-auto kullanılır.

<div class="d-flex align-items-center">
  <strong>Yedek hazırlanıyor...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Bu son örnekte görünür metin zaten durumu anlattığı için spinner'a aria-hidden="true" verilmiş ve içteki gizli metin kaldırılmıştır; aynı bilginin ekran okuyucuda iki kez okunmasını önler. Daha küçük bir spinner için .spinner-border-sm ya da .spinner-grow-sm eklenir; kaynak koddaki değişkenlere göre küçük boyut 1rem, küçük halkanın kalınlığı 0.2em'dir. Başka bir boyut gerekiyorsa belgeler satır içi stil ya da kendi CSS'inizle width ve height vermenizi önerir, örneğin style="width: 3rem; height: 3rem;".

Buton içinde spinner

Bir işlemin sürdüğünü göstermenin en yaygın yolu, tıklanan butonu devre dışı bırakıp içine küçük bir spinner koymaktır. Belgeler iki biçim gösterir: yalnızca spinner görünen ve metni .visually-hidden ile gizlenen buton, ya da spinner'ın yanında görünür bir metin taşıyan buton. Her iki durumda spinner'a aria-hidden="true" verilir; durumu anlatan metin butonun kendisindedir.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Kaydediliyor...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Kaydediliyor...
</button>

Butona disabled eklemek kullanıcının işlem sürerken aynı butona tekrar tıklamasını engeller. İşlem bitince spinner'ı kaldırıp butonu eski metnine döndürmek sizin kodunuzun işidir. Buton durumlarının tamamı Bootstrap buton sınıfları yazısında.

Azaltılmış hareket ve animasyon hızı

Belgelere göre spinner animasyonları prefers-reduced-motion medya sorgusuna bağlıdır. Kullanıcı işletim sisteminde hareketin azaltılmasını istemişse Bootstrap spinner'ları durdurmaz, yavaşlatır; çünkü yükleniyor bilgisi anlamlı bir animasyondur. Derlenmiş CSS'te bu medya sorgusu .spinner-border ve .spinner-grow için animation-duration değerini 1.5s yapar, yani varsayılan 0.75 saniyenin iki katı. Bu davranış Sass'taki $enable-reduced-motion seçeneğine bağlıdır; geçiş belgesi de spinner'ların v5'te bu tercihe uyduğunu ve dikey hizalamalarının iyileştirildiğini not eder. Aynı medya sorgusu bileşenlerdeki çoğu geçiş efektini ise tamamen kapatır; ayrıntılar erişilebilirlik belgesinin azaltılmış hareket bölümünde.

Uygulamalı mini örnek: sipariş listesi başlığı

Şimdi iki bileşeni bir arada kullanalım. Bir panelde siparişler başlığının yanında bekleyen sipariş sayısı, altında da liste yüklenirken ortalanmış bir spinner olsun.

<h3 class="d-flex align-items-center">
  Siparişler
  <span class="badge rounded-pill bg-warning text-dark ms-2">12<span class="visually-hidden"> bekleyen sipariş</span></span>
</h3>
<div class="d-flex justify-content-center py-5">
  <div class="spinner-border text-secondary" role="status">
    <span class="visually-hidden">Siparişler yükleniyor...</span>
  </div>
</div>

Başlık içindeki badge em tabanlı olduğu için <h3> boyutuna göre ölçeklenir; ms-2 onu başlık metninden ayırır. Gizli metnin başındaki boşluk, ekran okuyucunun "12 bekleyen sipariş" diye okumasını sağlar. Liste geldiğinde spinner'ı içeren <div> öğesini kaldırırsınız.

Sass değişkenleri

Sık yapılan hatalar

• v4 sınıflarını kullanmak: .badge-primary ve .badge-pill 5.0'da yoktur; .bg-primary ve .rounded-pill kullanın.
• Açık zeminde beyaz metin bırakmak: bg-warning, bg-info, bg-light ile text-dark ekleyin.
• Konumlandırılmış badge'in kapsayıcısını unutmak: .position-relative olmayan butonda badge sayfanın başka bir köşesine kaçar.
• Spinner'ı border-* ile renklendirmek: Şeffaf kenar boyanır, dönme etkisi kaybolur; text-* kullanın.
• Spinner'da role ve gizli metni atlamak: Ekran okuyucu kullanıcısı bir şeyin yüklendiğini öğrenemez.
• Spinner'ın kendiliğinden kaybolmasını beklemek: Gösterip gizlemek sizin JavaScript kodunuzun işidir.

Sık Sorulan Sorular

Badge'i tıklanabilir yapabilir miyim?

Badge'i bir <a> içine koyabilirsiniz ama v5'te bağlantılı badge'ler için üzerine gelme ve odak stilleri yoktur. Tıklanabilir bir öğe istiyorsanız butonu ya da bağlantıyı asıl öğe yapıp badge'i onun içine yerleştirmek daha doğru olur.

Badge sayısı sıfır olunca nasıl gizlerim?

İçeriği tamamen boş bir badge, kaynak koddaki :empty kuralı sayesinde otomatik gizlenir. "0" yazan badge ise boş değildir ve görünür; sayıyı sıfırladığınızda içeriği boşaltın ya da öğeyi kaldırın.

Spinner ile progress bar arasındaki fark nedir?

Spinner ne kadar sürdüğü bilinmeyen bir bekleme için uygundur. İşin ne kadarının bittiğini biliyorsanız (dosya yükleme yüzdesi gibi) Bootstrap progress bar daha fazla bilgi verir.

Spinner animasyonunu tamamen kapatabilir miyim?

Bootstrap azaltılmış hareket tercihinde spinner'ı yalnızca yavaşlatır. Tamamen durdurmak istiyorsanız kendi CSS'inizle animation özelliğini ezmeniz gerekir; Bootstrap'te bunun için hazır bir sınıf yoktur.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Buton sınıfları · List group · Position sınıfları · Progress bar · Erişilebilirlik