Semantic UI React Series
Semantic UI React Dropdown ile Ekstralar
Semantic UI, UI bileşen kütüphanelerden birisi. Bu yazıda bu kütüphane içerisinde yer aşan Dropdown UI bileşenin nasıl kullanıldığından bahsedeceğim.
Öncelikle dropdown-list dediğimiz şey bizim html Select elementine karşılık gelen nesne.
UI yaparken daha gelişmiş farklı ihtiyaçlar duyabiliriz. Bu farklı ihtiyaçları karşılayan Semantic React Dropdown bileşenininden bahsedeceğim.
- Dropdown itemleri Tıklanabilir(Clickable) olması sayesinde Menu olarak kullanabilirsiniz.
- selection prop ile Dropdown itemlerini seçilebilir item ile Select benzer bir yapıda kullanabilirsiniz. Dropdown item içerisindeki content nesnesini kendiniz oluşturursanız istediğiniz label, resim, icon vb.. içerikleri listelenen satırların içerisine koyabilirsiniz.
Hint: Bu kısımda oluşturduğunuz content içeriğini selected value set ederken hata alabilirsiniz bunun için oluşturduğunuz her item için text değerlerinide set ettiğinizde bu sorun ortadan kalkacaktır veya renderLabel handler yazarak burada seçilen nesnenin rendering siz yapabilirsiniz
2nci bir durumda Dropdown içerisindeki item uzunluğu çok ise bu selected element yaptığınızda dropdown başlığı içerisine sığmayacaktır. Ellipsis yöntemi ile bu sorunu çözebilirsiniz.
.dropdown-classname {
div.text {
width:210px;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden
}
}- search prop ile selection arasında filtreleme yaparak arama yapmanıza olanak sağlar. placeholder prop ile Search edeceğiniz alan içerisine focus olmadan kullanacının görmesini istediğiniz label yazabilirsiniz. Kullanıcı buraya focus olunca bu label otomatikman kalkacaktır.
- multiple prop ile birden fazla selection tag gibi eklemenize olanak sağlar.
- allowAdditions prop ile yukarıdaki örneğe yeni teknolojileri manual olarak girmek istersek bu opsiyonların içerisine eklememize olanak sağlıyor . onAddItem handle etmeniz gerekiyor.
- clearable prop ile seçili elemanın yanına (X) düğmesi ile selection temizlenmesine olanak sağlar.
- Layout yapısında Dropdown.Divider, Dropdown.Header, Dropdown.Menu, Dropdown.Item elemanları kullanarak hiyerarşik menu yapıları oluşturabilirsiniz.
- Görsellik ile inline, pointing, floating simple, prop kullanabilirsiniz.
- Durumu/State ilgili loading, error, disabled prop kullanabilirsiniz.
- Listelenen itemlerin görünümü ile ilgili scrollable, compact, fluid prop kullanabilirsiniz.
Uzun süredir farklı sektörlerde (Askeri, Telekomünikasyon, Devlet, Bankacılık, Sigortacılık, Tübitak, SaaS) yazılımlar geliştiriyorum. Bu süreçte Havelsan, Milsoft, T2, Cybersoft ve Thundra firmalarında yönetici ve yazılım mühendisi olarak çalıştım. Deneyimlerimi ve teknolojik bilgi birikimi mi olabildiğince OnurDayibasi.com adresinde toplamaya çalışıyorum. Tüm yazılarıma ve daha fazlasını bu site üzerinden erişebilirsiniz.
