BlockStack
Use to achieve no-fuss vertical centering.
A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the alignment and spacing of the items in the stack.
Use StackItem to group multiple elements inside a BlockStack together.
optional = ?
| Name | Type | Description |
|---|---|---|
| inlineAlignment? | "leading" | "center" | "trailing" |
Specifies the inline alignment. This affects the horizontal flow of elements. Default value: "leading" |
| spacing? | Spacing |
Adjusts spacing between children. Default value: "base" |
- 📱 All children of
BlockStackare placed in a single view object, which makes recycling the views expensive and results in poorer performance when scrolling. Consider keeping your Stacks simple. - By default,
BlockStackalignment is'leading’.
| ✅ Do | 🛑 Don't |
|---|---|
| Keep Stacks narrow. There is typically more vertical space than horizontal | Use complex and deep Stack layouts |
For more guidelines, refer to Polaris' Stack best practices.