Tutorials

/

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

Profil kartı gibi senaryolarda görsel, isim ve ikon gibi birden fazla elementi yan yana kompakt biçimde hizalamak için kullanılır.

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

Bu elementin kullanımını Profil Bilgileri Kartı Oluşturma senaryosu üzerinden inceleyeceğiz. Başlamak için ProfileCardData adında bir tablo oluşturun ve ekrandaki gibi doldurun. Ardından Actions alanından New SQL Action ile aksiyonunuzu yazın; tablo adının önüne "dbo." ekleyerek doğru şema adının tanımlanmasını sağlayın. Test edip Create butonu ile kaydedin. Aynı adımları verileri sağlayan ve filtreleyen aksiyon için de tekrarlayın.

Sayfaya bir Row elementi sürükleyin ve Desktop alanından tek sütun olarak ayarlayın. Column'ı Styling Layout alanından yatay ve dikeyde ortalayın. İçine bir Panel elementi ekleyin; Styling Layout alanından genişlik ve yüksekliği ayarlayın, arka planı beyaz olarak seçin ve Border alanından Radius değerini 50 olarak belirleyin. Panel içine bir Horizontal Stack elementi ekleyin ve Styling alanından dikeyde ortalayın. İçine bir Image elementi yerleştirip Styling Layout alanından genişlik ve yüksekliği 32 olarak ayarlayın. Yanına bir Label elementi ekleyin; Styling alanındaki Width değerini 100'den sıfıra güncelleyin. Label'ın yanına bir Icon elementi ekleyin.

Initial Action ile aksiyonu sayfaya tanımlayın. Image elementi üzerine tıklayıp Value alanından Action Result ile ProfileImage tanımlamasını yapın. Label için de aynı alandan tanımlamanızı gerçekleştirin. Icon elementine ise Properties panelinden ikonunuzu ekleyin.

Uygulama test edildiğinde, Horizontal Stack ile yan yana hizalanan elementlerin kullanıcı profil kartını doğru biçimde oluşturduğu görüntülenecektir.