Vertical Stack
Explore the functionality of the Vertical Stack element!
The Vertical Stack Element is a widely used element in application development processes for organizing user interface (UI) design. The Vertical Stack element is used to place UI elements in a vertical arrangement. Organizing elements in a vertical row makes the content more readable and orderly, helping users interact better with your application.
You can use the Vertical Stack element to adjust the spacing between two or more elements that are stacked on top of each other. You can add various elements, including Display and Input types, into a Vertical Stack. The Vertical Stack allows for the adjustment of spacing between two or more elements.
The Vertical Stack element has the following functionalities:
Element Arrangement: The Vertical Stack Element enables you to arrange different UI elements in a vertical sequence.
Responsiveness (Responsive Design): The Vertical Stack Element can assist in adapting to different screen sizes and devices. Since elements are arranged vertically, they can automatically adjust to screen sizes, keeping the content organized even on small screens like mobile devices.
Customization: The Vertical Stack Element allows you to customize the spacing between elements, alignment, and other style properties. This helps you tailor the layout to meet your design requirements.
Enhancing UI Design: The Vertical Stack Element helps users better understand and interact with content on a page or window, thereby improving the user experience.
The Vertical Stack element is supported in both mobile and web applications.
Adding Vertical Stack
Adding a Vertical Stack element to your application is quite straightforward. To add a Vertical Stack, follow these steps:
In the UI Design view, open the Elements panel on the left side.
Drag and drop the Vertical Stack element onto the screen.
You can customize the Vertical Stack element using the Properties panel.
When you drag and drop a Vertical Stack element from the Elements panel to an empty space on the screen, it comes automatically with a Row/Column.
You can add the Vertical Stack element inside elements such as
You can add a Horizontal Stack element inside a Vertical Stack element
1. Properties
When the Vertical Stack element is selected, parameters such as Gap, Authorization, and Visibility can be viewed in the Properties panel. These parameter areas allow you to adjust the spacing between the Vertical Stack and other elements, as well as edit special authorization settings and visibility preferences (show/hide/conditional).
You can add text and icons inside a Vertical Stack.
Gap
Select the Vertical Stack element. In the Properties panel, you can set the space value between elements added inside the Vertical Stack through the Gap section. It defaults to 12 pixels, but you can change this value as desired.
You can use Authorization options for the Vertical Stack element.
Click here for a detailed examination of adding Authorization processes in elements.
Click here for a detailed examination of Authorization processes based on user roles or screen roles.
Visibility in elements is a feature used to control its visibility or accessibility in certain situations. This feature is often used in application design or functionality.
You can use visibility options to make the Vertical Stack element always visible, hidden, or visible/hidden depending on a condition.
Click here for detailed information about adding Visibility to elements.
2. Styling
You can customize the Vertical Stack element with the Styling panel.
You can make additional adjustments by adding Border, Fill , or Shadow to the Vertical Stack element.
In the Vertical Stack element, you can make visual adjustments such as Padding and Size with Layout.
In the Layout area of the Vertical Stack element, Size and Display settings are not made. Therefore, these areas are inactive. You can do a limited alignment in the Align area.
Click here for detailed information about adding Layout to elements.
You can add color or an image to the background of the Vertical Stack element with Fill.
Click here for detailed information about adding Fill to elements.
You can add a border to the outer edges of the Vertical Stack and give radius.
Click here for detailed information about adding Borders to elements.
In web applications, you can add a shadow effect to the Vertical Stack element with Shadow. Shadow is not used in mobile applications.
Click here for detailed information about adding Shadow to elements.
Last updated
