Kuika’nın Vertical Stack elementi, kullanıcı arayüzü (UI) elemanlarını dikey bir sıra halinde düzenlemek için kullanılır. Bu element, içerikleri üst üste sıralayarak daha okunaklı ve düzenli bir yapı sağlar. Özellikle form alanları, liste görünümleri ve bilgi kartları gibi dikey düzenlemelerin gerektiği senaryolarda idealdir.

Vertical Stack elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Form alanlarını dikey şekilde düzenlemek,
• Kart veya kutucuk yapıları oluşturmak,
• Liste öğelerini alt alta sıralamak,
• Mobil ekranlarda içerikleri daha okunaklı sunmak vb. 

Şifre Yenileme Formu Alanları Kullanım Senaryosu

Bir şifre yenileme ekranında, Vertical Stack elementi içine eklenen form alanları dikey düzende gösterilir.

• Your Password → Kullanıcının yeni şifresini girdiği alan
• Confirm Password → Yeni şifrenin tekrar girildiği doğrulama alanı
• Checkbox → Kullanıcının şartları ve koşulları kabul etmesini sağlar
• Change Password butonu → Formu gönderip yeni şifreyi veri kaynağına kaydeder
• Alt metin & link → “Not a member yet? Sign up” ifadesiyle üyelik ekranına yönlendirir

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

• Vertical Stack sayesinde her input alanı bir alt satırda görünür.
• Alanlar arasında eşit boşluk (Gap) bırakılır → varsayılan 12px.
• Mobil uyumluluk sayesinde küçük ekranlarda da düzen bozulmaz.
• Form boş bir alana sürüklendiğinde otomatik olarak Row/Column ile birlikte gelir.
• Ayrıca Row, Panel, Input (TextInput, PasswordInput, Checkbox, Switch) gibi elementlerin içine de eklenebilir.
• Gerekirse Horizontal Stack, Vertical Stack içine eklenerek yan yana alanlar oluşturulabilir (örn. Ad & Soyad).

Gap Kullanımı

• Açıklama: İçerisine eklenen elemanlar arasındaki boşluğu ayarlamanızı sağlar.
• Varsayılan: 12 px
• Örnek: “Your Password” ve “Confirm Password” alanları arasında 12 px boşluk bırakmak.

Senaryo Adımı Tamamlandığında

• Kullanıcı form alanlarını üst üste görür.
• Aralarındaki boşluk düzenli şekilde ayarlanmıştır.
• Hem web hem de mobilde düzenli ve okunaklı bir görünüm elde edilir.

Kısıtlamalar

• Çok fazla eleman eklendiğinde dikey kaydırma ihtiyacı doğabilir.
• Gap değeri çok düşük veya çok yüksek verilirse okunabilirlik bozulabilir.

İpuçları ve Best Practices

• Formlarda Vertical Stack kullanarak alanları mantıklı bir sırada düzenleyin.
• Liste yapılarında Vertical Stack + Row kombinasyonu ile hem yatay hem dikey düzen sağlayın.
• Mobil için boşluk değerlerini test ederek en uygun görselliği yakalayın.