Stack

The “Stack” element allows you to stack or place several overlapping UI elements. Also, a “Stack” can be used as a parent layout to contain other child layouts. By default, the orientation of the stack layout is “vertical,” which can be changed programmatically.

Usage

When to use

You can use the stack layout to: –> Arrange the UI elements in one-dimensional stack either horizontally or vertically –> Fit as many as other child layouts –> Place UI elements with vertical and horizontal orientation –> Create vertical stack with horizontally aligned elements –> Create horizontal stack with vertically aligned elements

Stack Configuration

The “Stack” element consists of the following properties:

• UI Configuration
• Event Configuration

UI Configuration

For the ?Stack? element, you can configure the following UI properties:

Tab	Property Name	Description	Mandatory	New Default Value
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	Stack 1
Basic	Visible	Allows you to define the default visibility of the UI element.	No	marked
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.	No	marked
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
UI Properties-Background	Type	Allows you to configure the element’s background by providing the following options: –> Color –> Image	No	–
UI Properties-Background	Color	Allows you to configure a color as the element’s background.	No	#FFFFFF
UI Properties-Background	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring a color, you can also define the opacity in the percentage unit.	No	100%
UI Properties-Background	Image Source	This box becomes visible after you click the Image tab. To configure an image as the element’s background, you can use one of the following options: –> URL –> Asset Library	Yes	–
UI Properties-Background	Image URL	This box becomes visible after you select URL in the Image Source list. In the Image URL box, enter the URL of an image. The application fetches the image from the URL-based location and then displays it as the element’s background.	Yes	URL
UI Properties-Background	Select Asset	This box becomes visible after you select Assets Library in the Image Source list. This property allows you to configure an image as the element’s background from the Assets Manager module. To configure the image: –> Click the asset library icon (), and the Select Asset dialog box opens. –> In the Select Asset dialog box, select an image and then click Select, and you successfully configure the image as the element’s background.	Yes
UI Properties-Background	Elevation	Allows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.	No	0
UI Properties-Background	Margin	Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	4
UI Properties-Background	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
UI Properties-Shape & Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, the element will occupy the available space of the parent layout. Manual:- If you select this option, you can define a specific size of the element.
UI Properties-Shape & Decoration	Width Value	Enter the width of the element in the pixel unit or percentage unit.	No	100%
UI Properties-Shape & Decoration	Height Value	Enter the height of the element in the pixel unit.	No	10%
UI Properties-Shape & Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Show & Disable
UI Properties-Shape & Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Show & Disable
UI Properties-Shape & Decoration	Scrollable	Allows you to configure the scrolling feature as follows: –> Yes: – Select this option to activate the scrolling feature. –> No: – Select this option to deactivate the scrolling feature.	No	unamrked
UI Properties-Shape & Decoration	Border Radius	Allows you to define the radius of the element’s corners. Defining the radius of the corner makes the element’s corner round.	No	Theme Variable (Border Radius)
UI Properties-Shape & Decoration	Border Color	Allows you to configure the color of the element’s border. To configure the color: –> In the Border Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#c6c6c6
UI Properties-Shape & Decoration	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring a color, you can also define the opacity in the percentage unit.	No	100

Event Configuration

On the “Stack” element, you can configure the following event:

• onClick