Kuika’nın Horizontal Stack elementi, kullanıcı arayüzü elemanlarını yatay bir düzende hizalamak için kullanılır. Özellikle form yapılarında veya yan yana gösterilmesi gereken bilgi gruplarında etkilidir. Horizontal Stack sayesinde birden fazla eleman yan yana düzenlenebilir ve aralarındaki boşluklar kolayca ayarlanabilir.

Horizontal Stack elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Form alanlarını yan yana yerleştirmek,
• Kart, ikon veya buton gruplarını yatayda düzenlemek,
• Filtreleme ve arama alanlarını aynı satırda göstermek,
• Dashboard üzerinde metrik kartlarını yan yana sıralamak vb. 

Kayıt Formunda İsim ve Soyisim Alanı

Bir kayıt formunda kullanıcıdan Ad ve Soyad bilgisi alınmak istenir.

• Normalde iki ayrı satırda yer alabilecek bu alanlar, Horizontal Stack ile yan yana getirilir.
• Böylece form daha düzenli ve kompakt hale gelir.
• Boş bir alana eklendiğinde otomatik olarak Row/Column ile birlikte gelir.

UI Design İşlemleri

• Horizontal Stack içine aşağıdaki elementler eklenebilir:
  
  • Row
  • Panel
  • Input (TextInput, Currency, SelectBox, Checkbox, Switch vb.)
• Eklenen elementler otomatik olarak yatayda hizalanır.

Özelliklerin Senaryo Bağlamında Kullanılması

• Gap
  
  • Açıklama: Elementler arasındaki boşluk değerini ayarlar.
  • Varsayılan: 12px
  • Örnek: Ad ve Soyad inputlarının arasına 20px boşluk bırakmak.
• OverflowX
  
  • Açıklama: Yatay eksende taşan içeriklerin nasıl gösterileceğini belirler.
  • Seçenekler:
    
    • hidden: Taşan içerik gizlenir
    • auto: Taşma olursa otomatik kaydırma çubuğu eklenir.

Senaryo Adımı Tamamlandığında

• Kullanıcı formunda Ad ve Soyad alanları yan yana gösterilir.
• İki alan arasındaki boşluk Gap ayarı ile belirlenir.
• Mobilde alanlar daraldığında taşma yaşanırsa OverflowX devreye girerek düzen bozulmaz.

Kısıtlamalar

• Çok fazla element eklenirse mobil ekranlarda yatay kaydırma zorunlu hale gelir.
• Gap değeri küçük tutulursa elementler birbirine yapışık görünebilir.

İpuçları ve Best Practices

• Formlarda mantıksal olarak ilişkili alanları (Ad–Soyad, Başlangıç–Bitiş Tarihi) yatayda kullanın.
• Dashboard gibi yoğun ekranlarda 3–4 kartı yatayda göstermek idealdir.
• Mobil tasarımda yatay kaydırma gerekiyorsa OverflowX = auto kullanın.