Kuika’nın Row elementi, kullanıcı arayüzü elemanlarını yatay bir sıra halinde düzenlemek için kullanılır. Bu element, farklı bileşenleri tek bir satır üzerinde hizalamanızı ve aralarındaki boşlukları kontrol etmenizi sağlar. Özellikle form yapıları, kart tasarımları ve dashboard düzenlerinde sıkça tercih edilir.

Row elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Form alanlarını yan yana düzenlemek,
• Dashboard kartlarını yatay sırada göstermek,
• Tablo başlıkları oluşturmak,
• Resim, ikon ve metinleri tek satırda hizalamak vb. 

Şifre Sıfırlama Formu Kullanım Senaryosu

Bir kullanıcı giriş yaparken şifresini unuttuğunda, şifre sıfırlama ekranı kullanılır.
Ekranda kullanıcıdan yalnızca E-posta adresi istenir.

• Kullanıcı e-posta adresini Text Input alanına girer.
• “Send Reset Link” butonuna basıldığında sistem, kullanıcının e-posta adresine şifre sıfırlama bağlantısı gönderir.
• Alt kısımda “Return to Sign in” linki bulunur; kullanıcı giriş ekranına geri dönebilir.

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

• Row & Column
  
  • Form yapısı Row elementi içinde düzenlenmiştir.
  • Row, 24 kolona bölünerek farklı cihazlarda responsive görünüm sağlar.
• Text Input (Email)
  
  • Kullanıcıdan e-posta adresi alınır.
  • Required alan olarak işaretlenebilir, boş bırakıldığında gönderilemez.
• Button (Send Reset Link)
  
  • Tıklanınca sistemde tanımlı “SendResetLink” aksiyonunu çalıştırır.
  • Kullanıcıya e-posta gönderilir.
• Navigation Link (Return to Sign in)
  
  • Kullanıcıyı tekrar giriş ekranına yönlendirir.
  • UI içinde Label + Link kombinasyonu kullanılır.

Web, Tablet, Mobile Düzeni

• Desktop: Email alanı ve buton geniş ekran düzeninde rahatça görünür.
• Tablet: Row içindeki elemanlar daha dar kolonlarda gösterilir.
• Mobile: Elemanlar alt alta dizilir → Email input üstte, buton ortada, link en altta gösterilir.

Senaryo Adımı Tamamlandığında

• Kullanıcı e-posta adresini girip “Send Reset Link” butonuna bastığında sistem reset linki gönderir.
• Ekran boyutu küçüldüğünde tüm alanlar otomatik olarak alt alta sıralanır.
• Kullanıcı, isterse “Sign in” linkiyle tekrar giriş ekranına dönebilir.

Kısıtlamalar

• Header ve Footer elementleri, Row içine eklenemez.
• Çok fazla kolon kullanıldığında küçük ekranlarda karmaşık görünebilir.

İpuçları ve Best Practices

• Kolon düzenini her cihaz tipi için ayrı ayrı test edin.
• Elemanlar arasında yeterli boşluk bırakmak için Gap ve Padding ayarlarını kullanın.