1. Overview

V-Stack is a flow-based layout container that arranges its direct child elements from top to bottom. It stacks them based on the configured spacing between them and aligning them within the container according to the chosen setting. Therefore, a V-Stack has no visible content of its own since all content comes from elements placed inside it.

V-Stack can be placed inside other supported container elements such as a another V-Stack, H-Stack, or a Canvas element. These container elements along with all other elements can also be added into a V-Stack to build custom layouts.

Ideal for:

1. Page and section layouts
2. Cards and panels
3. Sidebars and navigation groups
4. Vertically arranged labels and values
5. Form sections and input groups
6. Activity feeds and lists

2. Display properties

A V-Stack element is a layout element with no content-binding characteristic of its own. The visible content can come from child elements and presets placed inside the V-Stack.

3. Styling properties

1. Alignment
   
2. Layout *link*
3. Stack styling
   
4. Background *link*
5. Padding *link*
6. Margin *link*
7. Corner Radius *link*
8. Border *link*
9. Shadow *link*
10. Opacity *link*

Note: When a V-Stack is switched to an H-Stack in the Style pane, the container is converted to a horizontal arrangement while retaining all children and their configurations.

4. Action properties

The Actions tab controls what happens when a portal user clicks the V-stack and triggers a preconfigured ON CLICK action. The actions can be:

1. None - No action is performed when the V-stack is clicked. This is the default option for the ON CLICK action.

1. Navigate To - Navigates the portal user to a destination when the V-stack is clicked. Selecting this option reveals two additional properties.
1. Page / URL - This is the navigation's destination. You can either enter a publicly accessible URL directly, or select from the list of portal pages available in the dropdown. The dropdown lists all default pages (Sign In, Sign Up, Reset Password, and Create Password) and any custom pages created in the portal.
2. Open In - This property controls how the destination loads. While Same Window reloads the current browser tab to display the destination portal page or URL, New Window opens it in a separate browser tab.

5. Try it yourself

Add a V-Stack and try the following:

1. Drop three Text elements inside and set Spacing to 16px to build a vertically stacked content section with consistent separation.
2. Set Width to Fill and place the V-Stack inside a Canvas with the layout values T set to 0 and L set to 0 to anchor a full-height sidebar panel.
3. Set Align Components to Center to center all children both horizontally and vertically within the container.
4. Set Overflow to Scroll and fix the Height to a value smaller than the total height of the children to create a scrollable content area.

6. Points to note

1. V-Stack controls direct children only - When a nested container such as another V-Stack or a Canvas is added within a V-Stack, they manages their own children independently.
2. Fill sizing is only available when the parent is a stack - When the V-Stack's parent is a Canvas element, Fill is not available for Width or Height in the layout property.
3. Overflow only has a visible effect when the V-Stack has a fixed size - If the stack uses Auto sizing, it expands to fit its children and overflow may not be triggered.

7. Related topics

1. Configuring and managing portal pages *link*
2. H-Stack *link*
3. Canvas *link*