Photo by CHUTTERSNAP on Unsplash

UI Common Components

Badge Bileşeni (React)

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store