1. Horizontal Stack Elementine Genel Bakış

Horizontal Stack elementi, kullanıcı arayüzünde birden fazla bileşeni yatay bir düzende hizalamak için kullanılan düzen (layout) odaklı bir UI elementidir. Özellikle form alanlarını yan yana yerleştirmek, küçük bilgi kutularını gruplayarak düzenlemek veya kullanıcıya daha kompakt bir görünüm sunmak için kullanılır.

Element, içindeki bileşenlerin sıralamasını, boşluklarını, hizalamasını ve genişlik davranışlarını kontrol ederek sayfa düzenini daha tutarlı ve okunabilir hale getirir.

Bu yapı sayesinde tasarımcılar ve geliştiriciler; grid, karta bağlı yatay içerik, ikon + metin kombinasyonları gibi birçok arayüz düzenini kolayca oluşturabilirler.

Horizontal Stack elementi, hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Form alanlarını yan yana yerleştirmek. Örneğin: “Ad – Soyad”, “Başlangıç Tarihi – Bitiş Tarihi”, “Şehir – İlçe”.
• Kısa bilgi kutularını yatay şekilde düzenlemek. Örneğin: “Yaş”, “Cinsiyet”, “Departman” gibi küçük verilerin bir satırda gösterilmesi.
• İkon + metin kombinasyonları oluşturmak. Örneğin: Bildirim ikonunun yanında sayı göstermek veya ikonlu butonlar tasarlamak.
• Kısa buton gruplarını yan yana yerleştirmek. (Kaydet – İptal, Filtre – Temizle gibi ikili aksiyon butonları)
• Özet görünüm kartlarında yatay bilgi bölümleri oluşturmak.
• Responsive tasarımlarda mobilde dikey, web’de yatay gösterim sağlamak.

2. Temel Özellikler

• Yatay hizalama desteği. İçerisine eklenen tüm UI elementlerini tek satırda yan yana hizalar.
• Boşluk (spacing) yönetimi. Elementler arasındaki yatay boşluklar kolayca ayarlanabilir, düzen daha okunabilir hale gelir.
• Hizalama kontrolü. İçerikler sol, orta veya sağ hizalanabilir; dikey hizalama da (top, center, bottom) desteklenir.
• Responsive davranış. Web ve mobilde uyumlu çalışır; küçük ekranlarda alt satıra geçecek şekilde düzenlenebilir (wrap desteğine göre).
• Kapsayıcı bir düzen elementi olarak çalışma. Horizontal Stack, bir container görevi görür. İçerisine Text, Input, Button, Icon, Image gibi tüm UI elementleri eklenebilir.
• Tasarım sadeliği ve düzen tutarlılığı. Yan yana gösterilmesi gereken veri veya element gruplarında düzeni bozmadan tekrar kullanılabilir bir yapı sunar.
• Mobil arayüzlerde kompakt yerleşim sağlar. Dar alanlarda bile düzenli bir görünüm sunarak kullanıcı deneyimini iyileştirir.

2.1. Element Ayarları (Properties)

Horizontal Stack elementini seçtiğinizde, sağ tarafta bulunan Properties paneli üzerinden yatay düzen ve içerik davranışlarını kontrol eden ayarları yapılandırabilirsiniz.

Aşağıdaki tüm ayarlar madde madde açıklanmıştır:

Gap (Boşluk Ayarı)

• Gap: Horizontal Stack içinde yer alan elementler arasındaki yatay boşluğu belirler.
  
  • Varsayılan boşluk değeri: 12 px
  • Daha sıkı veya daha geniş bir düzen oluşturmak için artırılabilir veya azaltılabilir. Bu ayar özellikle form alanlarının veya kısa bilgi kutularının yan yana düzenlendiği tasarımlarda okunabilirliği doğrudan etkiler.

OverflowX (Yatay Taşma Davranışı)

Yatay düzende çok fazla içerik yer aldığında, Stack içeriği taşabilir. OverflowX ayarı, taşan içeriklerin nasıl görüntüleneceğini belirler.

• Hidden: Yatay eksende taşan içerikler gizlenir. Bu ayar, temiz bir görünüm sağlamak için gereksiz taşmaları engeller; ancak içerik kesilir.
• Auto: İçerik taşarsa yatay kaydırma çubuğu otomatik olarak görüntülenir. Uzun element listelerinin tek satırda kaydırılarak görünmesi gereken durumlarda kullanılır. Örneğin, çok sayıda buton, hızlı filtre seçenekleri veya ikon listeleri için kullanılabilir.

2.2 Elemente Eklenebilen Aksiyonlar

Horizontal Stack elementi, bir düzen (layout) bileşeni olduğu için kendi üzerinden aksiyon atanmasını desteklemez. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve Horizontal Stack’e doğrudan bir tetikleyici eklenemez.

Aksiyon davranışına ilişkin temel noktalar:

• Horizontal Stack’e aksiyon eklenemez.
• İşlevsellik, Stack içerisine yerleştirilen UI elementlerine (Button, Icon, Text vb.) eklenen aksiyonlarla sağlanır.
• Stack yalnızca bir kapsayıcı (container) görevi görür; kullanıcı etkileşimi çocuk elementler tarafından yönetilir.

Horizontal Stack’in kendisi işlem tetiklemez; fonksiyonellik tamamen içine eklenen elementlere bağlıdır.

3. Horizontal Stack Elementi Nasıl Kullanılır? 

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

Senaryo: Profil Bilgileri Kartı Oluşturma

Bir sosyal medya veya kurumsal uygulamada kullanıcıların profil bilgileri genellikle düzenli ve okunabilir bir yapıda sunulur. Horizontal Stack, aynı satır üzerinde birden fazla bileşeni hizalamak için ideal bir yapı sağlar. Bu senaryoda, kullanıcının profil fotoğrafı ile temel bilgilerini yan yana gösteren bir Profil Kartı oluşturulmaktadır.

Senaryoda:

• Bir kullanıcı profil ekranında, profil fotoğrafını sol tarafa, ad–soyad ve unvan bilgisini ise sağ tarafa hizalı olarak göstermek isteniyor.
• Horizontal Stack, bu bileşenleri tek satır üzerinde düzgün bir görünümle yerleştirmeye imkân sağlar.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “ProfileCardData” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları:
  
  • ProfileImage: Image türünde kullanıcın profil görselini tutar.
  • UserName: Kayıtlı kullanıcının kullanıcı adı bilgisini tutar. 

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

• İki aksiyon tanımlamanız gerekir.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Ekleyen Aksiyon (InsertProfileCardData): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO ProfileCardData (Id, ProfileImage, UserName)
VALUES (
    NEWID(),
    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNjQiIGN5PSI0MiIgcj0iMjQiIHN0eWxlPSJmaWxsOiAjNDA3OGZmOyIvPjxwYXRoIGQ9Ik02NCA3MmMtMjYuNCAwLTQ4IDE3LjctNDggMzguN2MwIDIuMiAxLjggMy45IDQgMy45aDg4YzIuMiAwIDQtMS43IDQtMy45QzExMiA4OS43IDkwLjQgNzIgNjQgNzJ6IiBzdHlsZT0iZmlsbDogI2Q2ZWRmZjsiLz48L3N2Zz4=',
    'Kuika User'
);

‍

• Profil fotoğrafı base64 formatında veri tablosuna eklenmiştir. 

Uygularken ProfileCardData kısmını silip tekrar ProfileCardData yazıp enter a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan ve Filtreleyen Aksiyon (GetProfileCardData):

SELECT TOP 1 * FROM ProfileCardData;

• Örnek senaryoda demo bir kullanıcı kullanıldığı için oturum açan kullanıcıya veya kullanıcı ID’sine bağlı bir yapı kullanılmamıştır. İsterseniz senaryoyu gerçek kullanıcı bilgilerine göre uyarlayabiliriz.
  

Uygularken ProfileCardData kısmını silip tekrar ProfileCardData yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

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

Başlangıçta anasayfada: 

• UI Design modülünü açın.
• Sol yan panelden Elements > Container > Row elementini sayfaya sürükleyip bırakın. 
• Row içerisinde Row > Properties > Desktop alanını bir sütun olarak ayarlayın.

• Row içerisindeki Col alanına tıklayın ve Col > Styling > Layout > Align alanından sütunu sağ yaslayın ve dikeyde ortalayın.

• Sol yan panelden Elements > Container > Panel elementini Col içerisine sürükleyip bırakın. 
• Panel elementinde Panel > Styling > Layout alanında aşağıdaki tanımlamaları yapın.

• Arka plan rengi Panel > Styling > Fill > White Background olarak seçimini yapın.

• Kenarları Panel > Styling > Border > Radius alanında 50 px tanımlaması yapın.
• Panel elementi içerisine Elements > Container > HorizontalStack elementini ekleyin.
•  Horizontal Stack içerisini HorizontalStack > Styling > Layout > Align alanından dikeyde ortalayın.

Horizontal Stack içerisinde yatayda ortalama işlemi yapılamamaktadır.

•  Horizontal Stack içerisine Elements > Display > Image elementini ekleyin.

•  Image içerisinde Image > Styling > Layout > Width ve Height alanlarını 32 px olarak tanımlayın. 

•  Image yanına Elements > Display > Label elementini ekleyin.
•  Label elementi içerisinde Label > Styling > Layout > Width alanındaki 100 px değerini 0 px olarak ayarlayın. 
•  Label yanına Elements > Display > Icon elementini ekleyin.

Adım 4 - Kullanıcı Getirme Aksiyonun Tanımlanması

• Sayfaya Add Action > Initial Action > Custom > Managed DB > GetProfileCardData aksiyonunu tanımlayınız.

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

• Image elementinde Image > Properties > Value > Action Results > GetProfileCardData > First > ProfileImage alanından profil resmini tanımlıyoruz.

• Label elemenetinde Label > Properties > Value > GetProfileCardData > First > UserName alanından kullanıcı ismini tanımlıyoruz.

Preview:

Uygulama test edildiğinde, Horizontal Stack kullanılarak yan yana yerleştirilen elementlerin, kullanıcı profil kartı demosunu doğru şekilde oluşturduğu görüntülenir.

4. Ortak Özellikler (Properties)

Horizontal Stack 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)

• Elementleri düzenli aralıklarla hizalayın. Gap değerini çok düşük veya çok yüksek yaparak tasarımın bütünlüğünü bozmayın.
• Mobil ve web için optimize edin. Çok fazla element varsa mobilde taşma olabilir; OverflowX → auto tercih edilebilir.
• Yan yana gösterilmesi gereken alanlarda Horizontal Stack’i tercih edin. Özellikle form alanları veya küçük bilgi kutuları için ideal bir düzen sağlar.
• Padding ve dış boşlukları (margin) gerektiğinde Container ile yönetin. Horizontal Stack yalnızca yatay düzeni etkiler, çevresel boşluklar için Container kullanımı önerilir.

6. Kısıtlamalar

• Kendi başına aksiyon eklenemez. Horizontal Stack sadece düzen sağlar; etkileşim içermez.
• Aşırı uzun içerikler Stack düzenini bozabilir. OverflowX ayarı doğru yapılmazsa içerikler kesilebilir veya kaybolabilir.
• Sadece yatay düzen sağlar; dikey düzenleme için Vertical Stack kullanılmalıdır.