/
Stack Element
Stack element is a powerful tool that allows you to create lists, feeds, to-dos, carousels, and instant layouts. In this article, we'll walk you through how to use the stack element to create custom layouts in KappaX.
Understanding the Stack
A stack is a list of layers that are separated by a gap and have a direction, either horizontal or vertical. For developers, the stack is similar to CSS flexbox, and for designers, it is similar to auto-layouts or stacks used in UI prototyping tools. Additionally, the stack supports padding, alignment, and overflow.
Convert Group to a Stack
Enabling the stack functionality for a group layer is easy - simply click the button in the properties panel to change any KappaX group layer into a stack. Once you've done this, you'll be able to customize the stack's direction, alignment, and padding.
Stack properties
The stack element in KappaX is highly customizable, allowing you to create layouts that meet your specific needs. Some of the customization options include:
- Changing the direction of the stack (horizontal or vertical)
- Adjusting the gap between the stack children
- Setting the alignment of the stack (top-left, center, bottom-left, top-right, center-left, etc.)
- Setting the padding for each edge of the stack
- Adding overflow functionality to the stack
Move selected layers to a new stack
To move layers inside the stack, simply multi-select the layers you want to include and drag them inside the group layer for which you had enabled the stack property.
Stack scrolling
When you preview your experience, you’ll notice that all the elements fit well inside the stack. Hence, you cannot see the scroll. However, if you reduce the width of the stack to less than the width of the content inside it, a scroll will appear instantly. The same is true for the vertical direction.
Kappa Pro Tip
You can create lists, menus, drop-down option sliders, and many more creative & engaging things using the overflow scroll functionality In stack.
Understanding Constraints
Constraints define the behavior of the stack and its child layers when you resize the parent layer. This comes in handy when you animate a stack or change the size of the stack while editing. By default, child layers do not resize when the parent is resized.
Kappa Pro Tip
The resizing behavior of the group layer is easily manageable by applying various constraints to the child layers.
Types of Constraints
- Fixed: When you use a fixed constraint on a child element in a stack, the element's size remains constant, regardless of how the parent element is resized. This constraint is useful for elements that need to maintain a consistent size, such as icons or buttons. To use a fixed constraint, simply set the constraint of the child layer to ‘fixed’ from the property panel.
- Fill Parent: The Fill Parent constraint is one of the most commonly used constraints in KappaX. When you use Fill Parent on a child element, the element tries to fill the new space created due to the parent resize. This constraint is useful for elements that need to expand or contract based on the available space, such as text boxes or images. If you set the constraint of all children to Fill Parent, each child will divide the space equally. To use Fill Parent, simply set the constraint to "Fill Parent" from the property panel.
So, whether you're creating simple layouts or complex designs, constraints can help you achieve your goals quickly and efficiently.
Constraints Auto Resolution
Auto Resolution is a helpful feature that tackles conflicts between design constraints. For instance, when a parent layer aims to hug its content while a child layer tries to fill the container, conflicts arise. KappaX automatically adjusts the parent layer's constraint to a fixed width/height, resolving the conflict. With Auto Resolution, designers can enjoy smoother workflows and seamless design experiences, free from the headaches of constraint conflicts.