Stack
Use a stack to arrange components in a row, a column or in layers, and to style a group with a fill, border, shape and shadow.
A stack is a box that holds other components and arranges them. Nearly all layout in Miniwall is stacks inside stacks. Use one whenever you want to group things, put items side by side, add padding around a section, or give a section a card look.
Add it
- Drag Stack from Basics in the Components panel onto the phone.
- Or hover a layer in Layers, click +, then choose Basics, then Stack.
A new stack is a vertical column with children centered, a Gap of 16, a Width of Fill, a Height of Fit content, and Padding of 16 on every side. It is empty, so drop other components into it.
Where it can go
Inside the root stack, the header, the footer, other stacks, carousel pages (as the page itself), tab content, and the inner stacks of a package, purchase button, button, answer and tab button. A stack can also sit inside a tappable layer, because it is not interactive itself. See Where components can go.
A stack accepts any component that the nesting rules allow.
Design panel
The panel shows the kind Stack. Controls are described in Shared controls.
| Section | Control | What it does | Default |
|---|---|---|---|
| Layout | Direction | Horizontal, Vertical or Z-Layer. Changing it resets Alignment to center and Distribution to Start. | Vertical |
| Layout | Alignment | Position across the direction. For Z-Layer a menu offers nine positions. | Center |
| Layout | Distribution | Start, Center, End, Space between, Space around, Space evenly. Not shown for Z-Layer. | Start |
| Layout | Gap | Space between children, in pixels. | 16 |
| Size | Width, Height | Fill, Fit content, Fixed, Relative. | Fill, Fit content |
| Spacing | Padding, Margin | Space inside and outside. | 16 padding, 0 margin |
| Appearance | Shape | Rectangle, Circle, Pill, with four corner radii for rectangle and pill. Off by default: click +. | Off |
| Fill | Color or image | A solid color, a gradient, or an image with Fit Mode and Color Overlay. Click + to add, which starts as white. | Off |
| Border | Color, Width | A line around the stack. | Off, then 1 pixel light gray |
| Drop Shadow | X, Y, Radius, Color | A soft shadow. | Off, then 0, 2, 4, black |
Fill combines a solid or gradient color and an image into one control. Switching between Color and Image discards the other, so you never keep a hidden fill.
A stack that was created by Feature list also shows a Features section with an Add feature button.
States
- Inside a package, tab button or answer, the panel gets the Default and When selected tabs. The When selected tab edits only what changes while the plan, tab or answer is selected. See Package.
- There is no disabled state.
Dark mode and screen sizes
- Fill, Border and Drop Shadow have separate light and dark colors. Switch the view bar to dark mode to edit the dark ones. A fill image can also have its own dark image.
- Use Fill and Relative sizes to adapt to any screen width. A Fixed width stays the same on every device and can overflow a narrow phone.
- When the content is taller than the screen, the root stack scrolls. Nested stacks do not scroll by themselves.
Tips and common mistakes
- Space between and Center only show when the stack is larger than its content. Set the stack's Width to Fill and the Direction to Horizontal to push two items to opposite ends.
- A Fixed height can clip text on devices that use larger text or on narrow screens. Prefer Fit content and use padding for breathing room.
- Put the card look (fill, border, shape, shadow) on the outer stack and keep inner stacks plain.
- Use Z-Layer to place a small element over another, such as a badge on an image. Children are layered in the order they appear in Layers, the first at the bottom.
- Rename stacks that matter ("Hero", "Price row"). Unnamed stacks are all called Stack and are hard to tell apart.
- Deep nesting is easy to build and hard to maintain. If a stack holds only one stack, one of them is usually unnecessary.
In the JSON
The component type is stack. Its layout lives in dimension, spacing, size, padding and margin, its look in background_color, background, border, shape and shadow, and its children in components.