Vertical Stack

Vertical Stack elementinin işlevine göz atın.

Vertical Stack Elementi uygulama geliştirme süreçlerinde kullanıcı arayüzü (UI) tasarımını düzenlemek için yaygın olarak kullanılan bir elementtir.

Vertical Stack elementi, UI elemanlarını dikey bir sıra veya düzen içinde yerleştirmek için kullanılır. Dikey bir sıra içinde elemanları düzenlemek, içeriği daha okunaklı ve düzenli hale getirir ve kullanıcıların uygulamanızla daha iyi etkileşimde bulunmasına yardımcı olur.

İki veya daha fazla elementin yan yana geldiği durumlarda ara boşluklarını ayarlamak için Vertical Stack elementini kullanabilirsiniz. Container kategorisi altında bulunur. Display, Input tipindeki elementler başta olmak üzere birçok elementi ekleyebilirsiniz.

Vertical Stack elementinin aşağıda yer alan işlevleri bulunmaktadır.

  • Elementleri Düzenleme: Vertical Stack Elementi, farklı UI elemanlarını dikey bir sıra içinde düzenlemenizi sağlar.

  • Duyarlılık (Responsive Design): Vertical Stack Elementi, farklı ekran boyutlarına ve cihazlara uyum sağlama konusunda yardımcı olabilir. Elemanlar dikey olarak sıralandığı için, ekran boyutlarına göre otomatik olarak ayarlanabilirler. Bu, mobil cihazlar gibi küçük ekranlarda içeriğin düzenli kalmasını sağlar.

  • Özelleştirme: Vertical Stack Elementi, elemanlar arasındaki boşlukları, hizalamayı ve diğer stil özelliklerini özelleştirmenize olanak tanır. Bu, tasarım gereksinimlerinizi karşılamak için düzeni özelleştirmenize yardımcı olur.

  • UI Tasarımının İyileştirilmesi: Vertical Stack Elementi, kullanıcıların bir sayfa veya pencere üzerindeki içeriği daha kolay anlamalarını ve etkileşimde bulunmalarını sağlar. Bu, kullanıcı deneyimini iyileştirmeye yardımcı olur.

Vertical Stack Ekleme

Vertical Stack elementini uygulamanız içerisine eklemeniz oldukça kolay. Vertical Stack elementini eklemek için aşağıdaki adımları izlemeniz gerekmektedir.

  1. UI Design görünümünde, sol taraftaki Elements panelini açın.

  2. Elements paneli içerisinde Container kategorisi içerisinden Vertical Stack seçin.

  3. Vertical Stack elementini ekrana sürükleyin ve bırakın.

  4. Vertical Stack elementini Properties paneli içerisinden özelleştirebilirsiniz. Örneğin adımların sayısı, başlangıç değeri vb.

  5. Elements panelinden Vertical Stack elementini ekranda boş bir alana sürükle bırak ile eklediğinizde otomatik bir Row/Column ile birlikte gelir. Vertical Stack elementini bir Row/Column veya Panel elementi içine sürükle bırak ile ekleyebilirsiniz.

Vertical Stack elementi mobil ve web uygulamaları desteklemektedir

Vertical Stack elementini;

gibi elementler içine ekleyebilirsiniz.

Vertical Stack elementi içerisine Horizontal Stack elementi ekleyebilirsiniz.

Vertical Stack elementi seçildiğinde, Properties panelinde Gap, Authorization (Yetkilendirme) ve Visibility (Görünürlük) parametreleri görüntülenir. Bu parametre alanlarında, Vertical stack elementi ile başka elementler arasındaki boşluk yapısını, özel yetkilendirme ayarlarını ve görünürlük tercihlerini ( göster/gizle/koşullu ) düzenlemenizi sağlar.

Vertical Stack elementi içine metin ve ikon ekleyebilirsiniz.

Gap

Vertical Stack elementini seçin. Properties panelinde, Gap bölümü aracılığıyla Vertical Stack içerisine eklenen elementler arasındaki boşluk değerini ayarlayabilirsiniz. Varsayılan olarak 12 piksel olarak gelir.

Vertical Stack elementi için yetkilendirme seçeneklerini kullanabilirsiniz.

Elementlerde Authorization ekleme işlemlerini detaylı incelemek için tıklayın.

Kullanıcı rollerine göre veya ekran rollerine göre Authorization işlemlerini detaylı incelemek için tıklayın.

Elementler de visibility yani görünürlük, belirli bir durumda görünürlük veya erişilebilirliğini düzenlemenizi sağlar. Elementin görünür olduğunu kontrol etmek için kullanılan bir özelliktir. Bu özellik genellikle uygulama tasarımında veya işlevselliğinde kullanılır.

Vertical Stack elementi için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini visibility seçeneklerini kullanabilirsiniz.

Elementlerde Visibility ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Seçimler doğrultusunda Vertical Stack’in görünürlüğü ayarlanmış olacaktır.

Vertical Stack elementini Styling paneli ile özelleştirebilirsiniz.

Vertical Stack elementine Border (Kenarlık), Fill (Dolgu rengi) veya Shadow (Gölge) ekleyerek ek düzenlemeler yapabilirsiniz. Bu özellikler doğrultusunda Vertical Stack elementinin stilini özelleştirebilirsiniz.

Vertical Stack elementinde Layout ile çevresel iç boşluklar (Padding) ve boyutlandırma (Size) gibi görsel düzenlemeleri yapabilirsiniz.

Vertical Stack elementi içerisinde Layout alanında Size, Display ayarları yapılmamaktadır. Bu nedenle bu alanlar pasif haldedir. Align alanı içerisinde sınırlı bir şekilde hizalama yapabilirsiniz.

Elementlerde Layout ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Vertical Stack elementinin arka planına (background) renk veya görseli Fill (Dolgu) ile ekleyebilirsiniz.

Elementlere Fill (Dolgu) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Vertical Stack'in dış kenarlarına Border (kenarlık) ekleyebilir, köşe eğimleri (Radius) verebilirsiniz.

Elementlere Border (Kenarlık) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Web uygulamalar içerisinde Vertical Stack elementine Shadow (Gölge) ile gölge efekti ekleyebilirsiniz. Mobil uygulamalarda Shadow kullanılmamaktadır.

Elementlere Shadow (Gölge) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Last updated