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 nesnedir.

UI yaparken daha gelişmiş farklı ihtiyaçlar duyabiliriz. Bu farklı ihtiyaçları karşılayan Semantic React Dropdown bileşenininden bahsedeceğim.

Dropdown Item (Content Customization)

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

Dropdown Item (Text’in Menuye Sığmaması)

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
  }
}

Dropdown (Menu Item Responsive …)

Dropdown özelinde biz textleri 3 nokta ile (…) kesintili göstermek yerine açılan menu listesinin en büyük elemana göre açılmasını isteyebiliriz. Bu durumda seçim yapılan dropdown ile açılan menu listesini birbirinden ayırmamız gerekiyor. Aşağıdaki gibi en uzun menu textine göre yapının uzaması için floating , button özelliklerini dropdown atamanız gerekiyor.

Dropdown (Auto Suggestion , Search)

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

Dropdown (Esktra Özellikler)

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.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.