• /
  • Log in

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 of
Stack.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 of
Stack.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 of
Stack.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 of
Stack.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.

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 of
Stack.VERTICAL_TYPE.BOTTOM,
Stack.VERTICAL_TYPE.CENTER,
Stack.VERTICAL_TYPE.FILL,
Stack.VERTICAL_TYPE.FILL_EVENLY,
Stack.VERTICAL_TYPE.TOP,
>
Create issueEdit page
Copyright © 2021 New Relic Inc.