1. Row Elementine Genel Bakış

Row elementi, kullanıcı arayüzü bileşenlerini yatay bir hat üzerinde hizalamak için kullanılan temel bir düzen (layout) elementidir. Birden fazla UI elementini tek bir satır içinde düzenlemenize, bu elemanların hizalamasını kontrol etmenize ve aralarındaki boşlukları yönetmenize olanak tanır.

Form yapılarında, kart tasarımlarında, kısa bilgi gruplarında veya yan yana gösterilmesi gereken her türlü içerikte Row elementi düzeni daha okunabilir, düzenli ve kompakt bir hale getirir.

Row; metin, input, ikon, buton ve çeşitli görsel bileşenleri tek satırda toplamak için sıkça kullanılır. Hem web hem de mobil uygulamalarda tutarlı ve responsive bir yatay düzen oluşturmanıza yardımcı olur.

Row elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Kısa bilgi gruplarını aynı satırda toplamak. Kullanıcı bilgileri, özet değerler, mini istatistikler gibi içerikler için kullanılabilir. 
• İkon + metin kombinasyonları oluşturmak. Örneğin: Konum ikonu + adres metni, info ikonu + açıklama metni.
• Yan yana buton grupları oluşturmak. Örneğin: Kaydet – İptal, Onayla – Red, Filtre – Temizle butonları.
• Kart tasarımlarında üst/alt bilgi satırları oluşturmak. Profil kartları, ürün kartları veya liste satırları için temiz bir yatay düzen sağlar.
• Responsive arayüzlerde satır tabanlı düzen kurmak. Web’de yatay, mobilde alt alta dizilim için Row + Column kombinasyonu sık kullanılır.
• Yatay liste elemanları tasarlamak.  Etiketler, kategoriler veya kısa menü öğeleri aynı satırda sunulabilir.

2. Temel Özellikler

• Yatay hizalama (horizontal layout) desteği. Row içine eklenen tüm UI elementlerini tek bir satır üzerinde hizalar.
• Elementler arası boşluk yönetimi. Aralarındaki mesafeler kolayca ayarlanarak düzenin daha okunabilir hale gelmesi sağlanır.
• Dikey hizalama (vertical alignment) kontrolü. Row içindeki elemanlar üst, orta veya alt hizaya göre konumlandırılabilir.
• Responsive tasarım desteği. Web ve mobil ekranlarda uyumlu çalışır; gerekirse grid veya column yapılarıyla birlikte kullanılarak daha esnek düzenler oluşturulabilir.
• Kapsayıcı bir layout elementi olarak çalışma. Row içerisine Text, Icon, Input, Button, Image ve diğer tüm UI elementleri eklenebilir.

2.2. Element Ayarları (Properties)

Row elementini seçtiğinizde, sağ taraftaki Properties paneli üzerinden farklı cihaz tiplerinde nasıl görüneceğini ve kolon düzenini yapılandırabilirsiniz.

Column Customize (Kolon Özelleştirme)

• Row elementi, tasarımsal olarak toplam 24 kolonluk bir grid yapısına sahiptir. Bu sayede Row içindeki her element, bu 24 kolonluk yapıya göre paylaştırılabilir.
• Kullanıcı, satırdaki elementlerin kaplayacağı alanı cihazlara özel olarak belirleyebilir:
  
  • Bir element 8 kolon, diğeri 16 kolon kaplayacak şekilde ayarlanabilir.
  • Tasarımı daha kontrollü ve düzenli bir hale getirir.
• Bu sistem sayesinde:
  
  • Geniş ekranlarda daha dağıtılmış,
  • Mobil ekranlarda ise daha kompakt ve alt alta dizilemeyi kolaylaştıran bir yapı oluşturulur.

Web / Tablet / Mobile Kolon Yapılandırmaları

Row elementi, her cihaz tipi için farklı kolon genişlikleri tanımlamanıza imkan tanır.

• Web (Desktop): Geniş ekranlarda daha fazla alan kullanılarak geniş kolon dağılımları yapılabilir. Örneğin: Form alanlarını 12–12 olarak ikiye bölmek.
• Tablet: Orta ekran boyutlarında elementleri daha kompakt hale getirmek için farklı kolon dağılımları kullanılabilir. Örneğin: 16–8 veya 24’lük tek kolon.
• Mobile: Mobil uyumluluk en kritik noktadır; çoğu içerik alt alta dizilir. Örneğin: Her element için 24 kolon seçerek tam genişlik kullanmak.

Her cihaz tipi için kolon yapılandırması ayrı ayrı belirlenebilir, böylece tam responsive bir satır düzeni elde edilir.

2.3. Elemente Eklenebilen Aksiyonlar

Row elementi, düzen (layout) bileşeni olmasının yanı sıra kullanıcı etkileşimi destekleyen bir yapıdadır. Bu nedenle Row seçildiğinde sağ taraftaki ADD ACTION paneli üzerinden aşağıdaki tetikleyici kullanılabilir:

onClick

Kullanıcı Row üzerine tıkladığında tetiklenen aksiyondur. Satır şeklinde düzenlenen kart yapıları, mini bilgi blokları veya yatay içeriklerde tıklanabilir alan oluşturmak için kullanılır.

onClick Sık Kullanım Senaryoları

• Detay ekranına yönlendirme (Örn. bir liste satırında → kullanıcı detayına gitme)
• Modal / pop-up açma. Bilgi kartına tıklandığında ayrıntı modalının açılması.
• Filtre veya arama işlemi tetikleme
• Seçili satırı işaretleme / veri seti güncelleme
• Dinamik veri yükleme. Örneğin bir Row’a tıklandığında grafik veya tabloyu güncelleyen aksiyon çalıştırma.
• Satır bazlı seçim işlemleri. Örn. “Row seçildiğinde ilgili ID’yi saklama”.

3. Row Elementi Nasıl Kullanılır? 

Bu bölümde Row elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Şifre Sıfırlama Ekranı Oluşturma
Bir kullanıcı yönetimi veya giriş sistemi içeren uygulamalarda, “Şifremi Unuttum” ekranı sade ve anlaşılır bir kullanıcı deneyimi sunmalıdır. Bu ekranda yerleşim düzeninin doğru kurulması, özellikle form alanlarının ve yönlendirme linklerinin düzenli görünmesi için büyük önem taşır.

Bu senaryoda, Row elementi, hem form alanlarını hizalamak hem de yönlendirme linkini sayfa içinde doğru konumlandırmak için etkin bir şekilde kullanılır.

Senaryoda:

• Email girişi ve açıklama alanları dikey akışta yerleştirilirken, alt bölümdeki “Giriş Ekranına Dön” linki, Row elementi kullanılarak ortada hizalanmış şekilde gösterilir.
• Row sayesinde link, farklı ekran boyutlarında konumunu kaybetmez; her zaman düzenli, ortalanmış ve kolay erişilebilir bir yerde bulunur.
• Form butonu (“Sıfırlama Linki Gönder”) ile alt yönlendirme linki görsel olarak ayrılarak kullanıcıya net bir akış sunulur.

Row Kullanımının Faydaları:

• Merkezde hizalama: Alt yönlendirme linki tüm cihazlarda ortada görüntülenir.
• Düzenli yapı: Form alanları ile ikincil aksiyonlar arasında temiz bir görsel ayrım oluşturur.
• Uyumluluk: Mobil ve masaüstü cihazlarda aynı düzeni korur.

Şifre sıfırlama ekranı, farklı UI düzenleri ile tasarlanabilir. Bu örnek senaryo, yalnızca row elementine alternatif bir bakış açısı kazandırmak amacıyla hazırlanmıştır.

Adım 1 - Element Ekleme ve Stil Düzenleme

Başlangıçta: 

1. UI Design modülünü açın.
2. Sol yan panelden sayfaya Elements > Container > Row elementini sürükleyip bırakın.

3. Row elementi seçiliyken Row > Properties > Desktop alanını tek sütun olarak ayarlayın.

4. Row elementinde sağ yan panelden Row > Styling > Layout > Padding > Sol ve Sağ Kenar > 100 olarak ayarlayın.

5. Row elementi içerisine Elements > Display > Image elementini sürükleyip bırakın.
6. Image elementinde Image > Styling > Layout > Width ve Height alanlarını 64 px olarak ayarlayın.

7. Row içerisindeki Image elementindeki alanın altına Elements > Container > Row elementini sürükleyip bırakın.

8. Yeni Row elementi seçiliyken Row > Properties > Desktop alanını tek sütun olarak ayarlayın.
9. Row içerisinde Col alanına Elements > Display > Label elementini sürükleyip bırakın.
10. Label elementi seçiliyken Label > Styling > Text > Style  sadece Heading 3 seçimini yapın.

11. Label elementi altına Elements > Container > Row elementini sürükleyip bırakın.
12. Yeni Row elementi seçiliyken Row > Properties > Desktop alanını tek sütun olarak ayarlayın.
13. Row içerisinde Col alanına Elements > Text Input > TextInput elementini sürükleyip bırakın.
14. Text Input elementi altına Elements > Container > Row elementini sürükleyip bırakın ve Row > Properties > Desktop alanını tek sütun olarak ayarlayın.

15. Row içerisinde Col alanına Elements > Navigation > Button elementini sürükleyip bırakın.

16. Button elementi seçiliyken Button > Styling > Layout > Display > Block seçimini yapın.

17. Text Input elementi altına Elements > Container > Row elementini sürükleyip bırakın ve Row > Properties > Desktop alanını tek sütun olarak ayarlayın.
18. Row içerisinde Col alanına tıklayın Col > Styling > Layout > Align alanında dikeyde ve yatayda ortalamayı seçin.

19. Row içerisinde Col alanına Elements > Display > Label elementini sürükleyip bırakın.

20. Label elementi seçiliyken Label > Styling > Text > Style alanında sadece Button-Secondary tercihi seçili olarak ayarlayın.

21. Tüm işlemler sonrası beklenen sonuç aşağıdaki gibidir.

Adım 2 - Element Ayarlamalarının Yapılandırılması

1. Sayfadaki Image elementine tıklayın Image > Properties > Value > UploadedImages tercihini yapın ve yüklemek istediğiniz görseli ekleyin veya olanlardan seçin.

2. Sayfadaki birinci Label elementine tıklayın Label > Properties > Value alanına ‘Şifrenizi mi unuttunuz?’ yazısını ekleyin.

2. Sayfadaki Text input elementine tıklayın TextInput > Properties > PlaceHolder alanına name@domainname.com yazısını ekleyin.

4. Sayfadaki Button elementine tıklayın  Button > Properties > Label alanına ‘Sıfırlama Linki Gönder’ yazısını ekleyin.

5. Sayfada en altaki Label elementine tıklayın Label > Properties > Value alanına ‘Giriş Ekranına Dön’ yazısını ekleyin.

Adım 3 - Aksiyonları Ekleme

1. UI Design modülünde sayfadaki button elementine tıklayın. Element içerisine Button > Properties > Add Action > onClick > Authorization > Forgot Password hazır sistem aksiyonunu ekleyin.

2. Aksiyon içerisindeki username alanına username > Components > TextInput > value tanımlamasını yapın.

3. En alttaki Label elementine tıklayın. Element içerisine Label > Properties > Add Action > onClick > Navigation > Navigate hazır aksiyonunu ekleyin.

4. Navigate aksiyonu içerisindeki To Screen alanında hazır tanımlı bulunan ‘Signin’  sayfasını seçin.

Preview:

Uygulama test edildiğinde, şifre sıfırlama ekranı kullanıcıya sade ve anlaşılır bir arayüz sunar. Email giriş alanı, açıklayıcı başlık ve “Sıfırlama Linki Gönder” butonu düzenli şekilde yerleştirilir. Sayfanın alt bölümünde, Row elementi sayesinde “Giriş Ekranına Dön” bağlantısı ortalanmış olarak gösterilir.

Bu yapı sayesinde kullanıcı, şifre sıfırlama adımını kolayca tamamlayabilir ve ihtiyaç duyarsa tek tıkla giriş ekranına geri dönebilir. Arayüz, hem masaüstü hem de mobil cihazlarda tutarlı ve kullanıcı dostu bir deneyim sağlar.

4. Ortak Özellikler (Properties)

Row 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:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Boşluk ve hizalamayı düzenli tutun. Row içindeki elementlerin spacing ve vertical alignment ayarlarını düzenlemek kullanıcı deneyimini iyileştirir.
• Mobil uyumluluğu düşünerek kolon yapılarını cihazlara göre özelleştirin. Web’de yan yana görünen alanların mobilde alt alta görünmesi iyi bir kullanıcı deneyimi sağlar.

6. Kısıtlamalar

• Row yalnızca tek bir “onClick” tetikleyicisi destekler. Daha karmaşık etkileşimlerde alt elementlere ayrı aksiyon eklenmesi gerekebilir.
• Row düzeni yalnızca yatay hizalama sağlar. Dikey düzen için Vertical Stack kullanılmalıdır.
• Tablet ve mobil cihazlarda yanlış kolon ayarları görünüm bozukluğuna yol açabilir.