Divider elementi, uygulama arayüzünde yer alan içerik alanlarını görsel olarak ayırmak ve sayfa içeriğine net bir yapı kazandırmak için kullanılan yardımcı bir UI elementidir. İçerikler arasında görsel bir sınır oluşturarak kullanıcıların sayfayı daha kolay taramasını ve bölümleri daha hızlı anlamasını sağlar.
Divider elementi; formlar, liste yapıları, ayar ekranları ve uzun içeriklerin yer aldığı sayfalarda hiyerarşi ve düzen oluşturmak amacıyla kullanılır. İşlevsel bir etkileşim sunmaz; tamamen görsel ve düzenleyici bir rol üstlenir.
Divider elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Form alanları arasında görsel ayrım yapmak
Liste veya kart yapılarında bölümleri ayırmak
Ayar ekranlarında grup başlıklarını belirginleştirmek
Uzun sayfalarda içerik bloklarını düzenlemek
Sayfa akışını ve okunabilirliği artırmak
2. Temel Özellikler
Görsel ayrım sağlar: İçerik blokları arasında net bir sınır oluşturarak bölümlerin kolayca ayırt edilmesini sağlar.
Pasif (non-interactive) yapı: Kullanıcı etkileşimi, veri girişi veya aksiyon tetikleme işlevi bulunmaz.
Esnek yerleşim kullanımı Formlar, listeler, kartlar ve genel sayfa düzenlerinde rahatlıkla kullanılabilir.
Stil özelleştirme desteği Çizgi rengi, kalınlık, boşluk (margin/padding) gibi görsel ayarlar Styling paneli üzerinden düzenlenebilir.
2.1. Divider Elementi Özellikleri
Label: Divider, yalnızca çizgi olarak kullanılabileceği gibi bir metin de içerebilir. Label alanına statik bir değer ekleyebilir veya Symbol Picker aracılığıyla dinamik bir değer bağlayabilirsiniz.
Dashed: Divider çizgi tipini hazır seçenekler arasından seçebilirsiniz (örneğin, düz veya kesik çizgi).
2.2. Elemente Eklenebilen Aksiyonlar
Divider elementi, yalnızca görsel ve düzenleyici bir UI elementi olduğundan aksiyon (Add Action) eklemeyi desteklemez. Kullanıcı etkileşimi, veri girişi veya olay (event) tetikleme işlevi bulunmaz.
Bu nedenle:
Divider elementine onClick, onChange veya benzeri event’ler atanamaz.
Sağ Properties panelinde Add Action alanı görüntülenmez.
Divider, herhangi bir iş akışını, state güncellemesini veya API çağrısını tetikleyemez.
Element tamamen pasif (non-interactive) bir yapıya sahiptir.
Divider elementi yalnızca içerikleri görsel olarak ayırmak, sayfa düzenini netleştirmek ve tasarım hiyerarşisini güçlendirmek amacıyla kullanılır. İşlevsellik gerektiren senaryolar için Divider yerine Button, Icon veya diğer etkileşimli elementler tercih edilmelidir.
3. Divider Elementi Nasıl Kullanılır?
Bu bölümde Divider elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Senaryo: Divider Kullanımı
Bu senaryoda Divider elementi, form içerisindeki alanları anlamlı gruplara ayırmak için kullanılmıştır. Kullanıcı bilgileri ve adres bilgileri, Kişisel Bilgiler ve Adres Bilgileri başlıkları altında ayrılarak formun daha düzenli ve okunabilir olması sağlanmıştır.
Adım 1 - Divider Elementini Ekleme
Başlangıçta anasayfada:
Sol yan panelden iki tane Elements > Text Input > TextInput elementini sayfaya sürükleyip bırakın.
Sol yan panelden Elements > Special > Divider elementini sayfaya sürükleyip bırakın.
Divider elementine Divider > Properties > Label > “Kişisel Bilgiler” olarak isim verin.
Çizgi stilini Divider > Properties > Dashed > Açık olarak ayarlayın.
Divider altına iki tane daha Elements > Text Input > TextInput elementini sayfaya sürükleyip bırakın.
Altına Elements > Special > Divider elementini sayfaya sürükleyip bırakın.
Divider elementine Divider > Properties > Label > “Adres Bilgileri” olarak isim verin.
Çizgi stilini Divider > Properties > Dashed > Açık olarak ayarlayın.
Preview:
Divider elementi, form alanlarını label ve kesikli çizgi ile ayırarak içerikleri daha düzenli ve okunabilir hale getirir.
4. Ortak Özellikler (Properties)
Divider elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
