Stack

Usage

import { Stack } from 'nr1'

Examples

Props

childrenrequirednode

Stack items to display.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

directionTypeenum

DEFAULT

Stack.DIRECTION_TYPE.HORIZONTAL

Direction of the stack items.

<One ofStack.DIRECTION_TYPE.HORIZONTAL,
Stack.DIRECTION_TYPE.VERTICAL,
>

fullHeightboolean

DEFAULT

false

Expands the stack to occupy all available height.

fullWidthboolean

DEFAULT

false

Expands the stack to occupy all available width.

gapTypeenum

DEFAULT

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,
>

horizontalTypeenum

DEFAULT

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,
>

previewboolean

DEFAULT

false

Visually draws the boxes of the Stack and its StackItems.

spacingTypeenum[]

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,
>
>

styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

verticalTypeenum

DEFAULT

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,
>