Stack is a 1-dimensional layout system with options to control the direction, spacing, distribution and relative sizing of its children elements.
Usage
import { Stack } from 'nr1'
Examples
Basic
ReferenceError: Stack is not defined
Direction
ReferenceError: Stack is not defined
Gap
ReferenceError: Stack is not defined
Horizontal alignment
ReferenceError: Stack is not defined
Vertical alignment
ReferenceError: Stack is not defined
Props
Stack items to display.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
Stack .DIRECTION_TYPE .HORIZONTAL
Direction of the stack items.
<One ofStack.DIRECTION_TYPE.HORIZONTAL,Stack.DIRECTION_TYPE.VERTICAL,>
false
Expands the stack to occupy all available height.
false
Expands the stack to occupy all available width.
Stack .GAP_TYPE .MEDIUM
Space between each stack item.
<One ofStack.GAP_TYPE.EXTRA_LARGE,Stack.GAP_TYPE.LARGE,Stack.GAP_TYPE.MEDIUM,Stack.GAP_TYPE.NONE,Stack.GAP_TYPE.SMALL,>
Stack .HORIZONTAL_TYPE .LEFT
Sets the horizontal alignment and distribution of the stack items.
<One ofStack.HORIZONTAL_TYPE.CENTER,Stack.HORIZONTAL_TYPE.FILL,Stack.HORIZONTAL_TYPE.FILL_EVENLY,Stack.HORIZONTAL_TYPE.LEFT,Stack.HORIZONTAL_TYPE.RIGHT,>
false
Visually draws the boxes of the Stack and its StackItems.
Spacing property. Spacing is defined as a tuple of zero to four
values, which follow the same conventions as CSS properties like
margin
or padding
. To omit a value, use SPACING_TYPE.OMIT
.
<Array of<One ofStack.SPACING_TYPE.EXTRA_LARGE,Stack.SPACING_TYPE.LARGE,Stack.SPACING_TYPE.MEDIUM,Stack.SPACING_TYPE.NONE,Stack.SPACING_TYPE.OMIT,Stack.SPACING_TYPE.SMALL,>
>
Inline style for custom styling.
Adds a data-test-id
.
Used to target the component in unit and e2e testing.
Stack .VERTICAL_TYPE .TOP
Sets the vertical alignment and distribution of the stack items.
<One ofStack.VERTICAL_TYPE.BOTTOM,Stack.VERTICAL_TYPE.CENTER,Stack.VERTICAL_TYPE.FILL,Stack.VERTICAL_TYPE.FILL_EVENLY,Stack.VERTICAL_TYPE.TOP,>
Methods
Stack.render
function () => undefined