Photo by CHUTTERSNAP on Unsplash

UI Common Components

Badge Bileşeni (React)

Badge Bileşeni Nedir ? React UI Framework’leri Badge bileşeninin nasıl ele almış ?. Bu blog yazısında bunu analiz edeceğim.

Bir UI elementinin yanında ekstra bilgi vermek için kullandığımız rozetler;

https://onurdayibasi.dev/icon-width-badge

• Bu rozet bildirimlerin sayısı olabilir.
• Bir kişinin aktif olup olmadığını gösterebilir.
• Bir durumun başarılı, başarız, uyarı vb durumlarını gösterebilir.

Özetle o UI Elementin’in ekstra bilgi vermek istediğimiz durumlarda bu rozetleri kullanırız. Bunu kendinizde CSS ve JS ile gerçekleştirebileceğiniz gibi UI Framework’ leri içerisinde konfigüre edebileceğiniz Badge bileşenleri bulunur. Gelin bunlara ve özelliklerine yakından bakalım. Burada inceleceğim React UI Framework’leri

• Ant Design
• Chakra
• EverGreen
• Material UI
• PrimeReact
• React Bootstap
• SemanticUI

Prime React ve Ant Design

ve

MUI, Chakra, EverGreen, React Bootstap, Semantic UI

Yukarıdan da görebileceğiniz gibi Badge

• Boyutları
• Tipleri (Number, Status vb..)
• Bağlı Olduğu bileşene göre pozisyonları
• Renkleri
• Sayıların belli sayıların üzerine çıkma durumları
• Animasyonları
• Gösterilip, Gösterilmeme Durumları
• vb.. bir çok konuyu içerir.