• /
  • Log in
  • Free account

Stack

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

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.

Used to target the component in unit and e2e testing.

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

Methods

Stack.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.