Birden fazla elementi tek satırda hizalayarak (ör. şifre sıfırlama ekranındaki logo, başlık, giriş alanı ve buton) dikey akışlı, düzenli bir form yapısı oluşturmak için kullanılır.
Row elementi, kullanıcı arayüzü bileşenlerini yatay bir hat üzerinde hizalamak için kullanılan temel bir layout elementidir. Birden fazla UI elementini tek bir satırda düzenlemenize, hizalamalarını kontrol etmenize ve aralarındaki boşlukları yönetmenize olanak tanır.
Bu elementin kullanımını Şifre Sıfırlama Ekranı Oluşturma senaryosu üzerinden inceleyeceğiz. Sayfaya bir Row elementi sürükleyin, Desktop alanından tek sütun seçin ve Styling Layout alanından sağ ve sol Padding değerlerini 100 olarak ayarlayın. İçine bir Image elementi ekleyin ve Styling Layout alanından genişlik ile yüksekliği 64 olarak belirleyin.
Image elementinin altına sırasıyla dört Row elementi ekleyip; her birini Desktop alanından tek sütun olarak ayarlayacağız. Birinci Row içine bir Label elementi yerleştirin ve Styling alanından Heading 3 olarak ayarlayın. İkinci Row içine bir Text Input elementi sürükleyin. Üçüncü Row içine bir Button elementi ekleyin ve Styling Layout alanındaki Display alanından Block seçimini yapın. Dördüncü Row içine bir Label elementi yerleştirin, Styling Layout alanından ortalayın ve ButtonSecondaryText seçimini yapın.
Image elementine uygun görseli ekleyin. Label elementinin Value alanına "Şifrenizi mi unuttunuz" yazın, Text Input elementinin Placeholder alanını doldurun, Button elementinin Value alanına "Sıfırlama Linki Gönder" yazın ve en alttaki Label elementinin Value alanına "Giriş Ekranına Dön" yazın.
Button elementine tıklayın ve Properties panelinden Add Action ile onClick üzerinden Authorization, Forgot Password aksiyonunu bağlayın; Component alanından tanımlamanızı yapın. "Giriş Ekranına Dön" yazılı Label elementine ise Navigation, Navigate ile Signin sayfasını bağlayın.
Preview butonuna bastığınızda, hizalamaları ve boşlukları optimize edilmiş, düzenli bir şifre sıfırlama ekranıyla karşılaşacaksınız.
