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

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--directionHorizontal">
    <span className="nr1-Example--stack--title">Horizontal (default)</span>
    <Stack preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>;

1
<div className="nr1-Example--stack">
2
  <div className="nr1-Example--stack--directionHorizontal">
3
    <span className="nr1-Example--stack--title">Horizontal (default)</span>
4
    <Stack preview>
5
      <StackItem>
6
        <div className="nr1-Box--a">1</div>
7
      </StackItem>
8
      <StackItem>
9
        <div className="nr1-Box--b">2</div>
10
      </StackItem>
11
      <StackItem>
12
        <div className="nr1-Box--c">3</div>
13
      </StackItem>
14
    </Stack>
15
  </div>
16
</div>;

ReferenceError: Stack is not defined

Direction

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--directionHorizontal">
    <span className="nr1-Example--stack--title">Horizontal (default)</span>
    <Stack directionType={Stack.DIRECTION_TYPE.HORIZONTAL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--directionVertical">
    <span className="nr1-Example--stack--title">Vertical</span>
    <Stack directionType={Stack.DIRECTION_TYPE.VERTICAL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>;

1
<div className="nr1-Example--stack">
2
  <div className="nr1-Example--stack--directionHorizontal">
3
    <span className="nr1-Example--stack--title">Horizontal (default)</span>
4
    <Stack directionType={Stack.DIRECTION_TYPE.HORIZONTAL} preview>
5
      <StackItem>
6
        <div className="nr1-Box--a">1</div>
7
      </StackItem>
8
      <StackItem>
9
        <div className="nr1-Box--b">2</div>
10
      </StackItem>
11
      <StackItem>
12
        <div className="nr1-Box--c">3</div>
13
      </StackItem>
14
    </Stack>
15
  </div>
16
17
  <div className="nr1-Example--stack--directionVertical">
18
    <span className="nr1-Example--stack--title">Vertical</span>
19
    <Stack directionType={Stack.DIRECTION_TYPE.VERTICAL} preview>
20
      <StackItem>
21
        <div className="nr1-Box--a">1</div>
22
      </StackItem>
23
      <StackItem>
24
        <div className="nr1-Box--b">2</div>
25
      </StackItem>
26
      <StackItem>
27
        <div className="nr1-Box--c">3</div>
28
      </StackItem>
29
    </Stack>
30
  </div>
31
</div>;

ReferenceError: Stack is not defined

Gap

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--gapNone">
    <span className="nr1-Example--stack--title">None</span>
    <Stack gapType={Stack.GAP_TYPE.NONE} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--gapSmall">
    <span className="nr1-Example--stack--title">Small</span>
    <Stack gapType={Stack.GAP_TYPE.SMALL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--gapMedium">
    <span className="nr1-Example--stack--title">Medium (default)</span>
    <Stack gapType={Stack.GAP_TYPE.MEDIUM} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--gapLarge">
    <span className="nr1-Example--stack--title">Large</span>
    <Stack gapType={Stack.GAP_TYPE.LARGE} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--gapExtraLarge">
    <span className="nr1-Example--stack--title">Extra large</span>
    <Stack gapType={Stack.GAP_TYPE.EXTRA_LARGE} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>;

1
<div className="nr1-Example--stack">
2
  <div className="nr1-Example--stack--gapNone">
3
    <span className="nr1-Example--stack--title">None</span>
4
    <Stack gapType={Stack.GAP_TYPE.NONE} preview>
5
      <StackItem>
6
        <div className="nr1-Box--a">1</div>
7
      </StackItem>
8
      <StackItem>
9
        <div className="nr1-Box--b">2</div>
10
      </StackItem>
11
      <StackItem>
12
        <div className="nr1-Box--c">3</div>
13
      </StackItem>
14
    </Stack>
15
  </div>
16
17
  <div className="nr1-Example--stack--gapSmall">
18
    <span className="nr1-Example--stack--title">Small</span>
19
    <Stack gapType={Stack.GAP_TYPE.SMALL} preview>
20
      <StackItem>
21
        <div className="nr1-Box--a">1</div>
22
      </StackItem>
23
      <StackItem>
24
        <div className="nr1-Box--b">2</div>
25
      </StackItem>
26
      <StackItem>
27
        <div className="nr1-Box--c">3</div>
28
      </StackItem>
29
    </Stack>
30
  </div>
31
32
  <div className="nr1-Example--stack--gapMedium">
33
    <span className="nr1-Example--stack--title">Medium (default)</span>
34
    <Stack gapType={Stack.GAP_TYPE.MEDIUM} preview>
35
      <StackItem>
36
        <div className="nr1-Box--a">1</div>
37
      </StackItem>
38
      <StackItem>
39
        <div className="nr1-Box--b">2</div>
40
      </StackItem>
41
      <StackItem>
42
        <div className="nr1-Box--c">3</div>
43
      </StackItem>
44
    </Stack>
45
  </div>
46
47
  <div className="nr1-Example--stack--gapLarge">
48
    <span className="nr1-Example--stack--title">Large</span>
49
    <Stack gapType={Stack.GAP_TYPE.LARGE} preview>
50
      <StackItem>
51
        <div className="nr1-Box--a">1</div>
52
      </StackItem>
53
      <StackItem>
54
        <div className="nr1-Box--b">2</div>
55
      </StackItem>
56
      <StackItem>
57
        <div className="nr1-Box--c">3</div>
58
      </StackItem>
59
    </Stack>
60
  </div>
61
62
  <div className="nr1-Example--stack--gapExtraLarge">
63
    <span className="nr1-Example--stack--title">Extra large</span>
64
    <Stack gapType={Stack.GAP_TYPE.EXTRA_LARGE} preview>
65
      <StackItem>
66
        <div className="nr1-Box--a">1</div>
67
      </StackItem>
68
      <StackItem>
69
        <div className="nr1-Box--b">2</div>
70
      </StackItem>
71
      <StackItem>
72
        <div className="nr1-Box--c">3</div>
73
      </StackItem>
74
    </Stack>
75
  </div>
76
</div>;

ReferenceError: Stack is not defined

Horizontal alignment

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--horizontalAlignmentLeft">
    <span className="nr1-Example--stack--title">Left (default)</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.LEFT} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--horizontalAlignmentCenter">
    <span className="nr1-Example--stack--title">Center</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.CENTER} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--horizontalAlignmentRight">
    <span className="nr1-Example--stack--title">Right</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.RIGHT} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--horizontalAlignmentFill">
    <span className="nr1-Example--stack--title">Fill</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.FILL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--horizontalAlignmentFillEvenly">
    <span className="nr1-Example--stack--title">Fill evenly</span>
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.FILL_EVENLY} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>;

1
<div className="nr1-Example--stack">
2
  <div className="nr1-Example--stack--horizontalAlignmentLeft">
3
    <span className="nr1-Example--stack--title">Left (default)</span>
4
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.LEFT} preview>
5
      <StackItem>
6
        <div className="nr1-Box--a">1</div>
7
      </StackItem>
8
      <StackItem>
9
        <div className="nr1-Box--b">2</div>
10
      </StackItem>
11
      <StackItem>
12
        <div className="nr1-Box--c">3</div>
13
      </StackItem>
14
    </Stack>
15
  </div>
16
17
  <div className="nr1-Example--stack--horizontalAlignmentCenter">
18
    <span className="nr1-Example--stack--title">Center</span>
19
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.CENTER} preview>
20
      <StackItem>
21
        <div className="nr1-Box--a">1</div>
22
      </StackItem>
23
      <StackItem>
24
        <div className="nr1-Box--b">2</div>
25
      </StackItem>
26
      <StackItem>
27
        <div className="nr1-Box--c">3</div>
28
      </StackItem>
29
    </Stack>
30
  </div>
31
32
  <div className="nr1-Example--stack--horizontalAlignmentRight">
33
    <span className="nr1-Example--stack--title">Right</span>
34
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.RIGHT} preview>
35
      <StackItem>
36
        <div className="nr1-Box--a">1</div>
37
      </StackItem>
38
      <StackItem>
39
        <div className="nr1-Box--b">2</div>
40
      </StackItem>
41
      <StackItem>
42
        <div className="nr1-Box--c">3</div>
43
      </StackItem>
44
    </Stack>
45
  </div>
46
47
  <div className="nr1-Example--stack--horizontalAlignmentFill">
48
    <span className="nr1-Example--stack--title">Fill</span>
49
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.FILL} preview>
50
      <StackItem>
51
        <div className="nr1-Box--a">1</div>
52
      </StackItem>
53
      <StackItem>
54
        <div className="nr1-Box--b">2</div>
55
      </StackItem>
56
      <StackItem>
57
        <div className="nr1-Box--c">3</div>
58
      </StackItem>
59
    </Stack>
60
  </div>
61
62
  <div className="nr1-Example--stack--horizontalAlignmentFillEvenly">
63
    <span className="nr1-Example--stack--title">Fill evenly</span>
64
    <Stack horizontalType={Stack.HORIZONTAL_TYPE.FILL_EVENLY} preview>
65
      <StackItem>
66
        <div className="nr1-Box--a">1</div>
67
      </StackItem>
68
      <StackItem>
69
        <div className="nr1-Box--b">2</div>
70
      </StackItem>
71
      <StackItem>
72
        <div className="nr1-Box--c">3</div>
73
      </StackItem>
74
    </Stack>
75
  </div>
76
</div>;

ReferenceError: Stack is not defined

Vertical alignment

<div className="nr1-Example--stack">
  <div className="nr1-Example--stack--verticalAlignmentTop">
    <span className="nr1-Example--stack--title">Top (default)</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.TOP} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--verticalAlignmentCenter">
    <span className="nr1-Example--stack--title">Center</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.CENTER} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--verticalAlignmentBottom">
    <span className="nr1-Example--stack--title">Bottom</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.BOTTOM} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--verticalAlignmentFill">
    <span className="nr1-Example--stack--title">Fill</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.FILL} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>

  <div className="nr1-Example--stack--verticalAlignmentFillEvenly">
    <span className="nr1-Example--stack--title">Fill evenly</span>
    <Stack verticalType={Stack.VERTICAL_TYPE.FILL_EVENLY} preview>
      <StackItem>
        <div className="nr1-Box--a">1</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--b">2</div>
      </StackItem>
      <StackItem>
        <div className="nr1-Box--c">3</div>
      </StackItem>
    </Stack>
  </div>
</div>;

1
<div className="nr1-Example--stack">
2
  <div className="nr1-Example--stack--verticalAlignmentTop">
3
    <span className="nr1-Example--stack--title">Top (default)</span>
4
    <Stack verticalType={Stack.VERTICAL_TYPE.TOP} preview>
5
      <StackItem>
6
        <div className="nr1-Box--a">1</div>
7
      </StackItem>
8
      <StackItem>
9
        <div className="nr1-Box--b">2</div>
10
      </StackItem>
11
      <StackItem>
12
        <div className="nr1-Box--c">3</div>
13
      </StackItem>
14
    </Stack>
15
  </div>
16
17
  <div className="nr1-Example--stack--verticalAlignmentCenter">
18
    <span className="nr1-Example--stack--title">Center</span>
19
    <Stack verticalType={Stack.VERTICAL_TYPE.CENTER} preview>
20
      <StackItem>
21
        <div className="nr1-Box--a">1</div>
22
      </StackItem>
23
      <StackItem>
24
        <div className="nr1-Box--b">2</div>
25
      </StackItem>
26
      <StackItem>
27
        <div className="nr1-Box--c">3</div>
28
      </StackItem>
29
    </Stack>
30
  </div>
31
32
  <div className="nr1-Example--stack--verticalAlignmentBottom">
33
    <span className="nr1-Example--stack--title">Bottom</span>
34
    <Stack verticalType={Stack.VERTICAL_TYPE.BOTTOM} preview>
35
      <StackItem>
36
        <div className="nr1-Box--a">1</div>
37
      </StackItem>
38
      <StackItem>
39
        <div className="nr1-Box--b">2</div>
40
      </StackItem>
41
      <StackItem>
42
        <div className="nr1-Box--c">3</div>
43
      </StackItem>
44
    </Stack>
45
  </div>
46
47
  <div className="nr1-Example--stack--verticalAlignmentFill">
48
    <span className="nr1-Example--stack--title">Fill</span>
49
    <Stack verticalType={Stack.VERTICAL_TYPE.FILL} preview>
50
      <StackItem>
51
        <div className="nr1-Box--a">1</div>
52
      </StackItem>
53
      <StackItem>
54
        <div className="nr1-Box--b">2</div>
55
      </StackItem>
56
      <StackItem>
57
        <div className="nr1-Box--c">3</div>
58
      </StackItem>
59
    </Stack>
60
  </div>
61
62
  <div className="nr1-Example--stack--verticalAlignmentFillEvenly">
63
    <span className="nr1-Example--stack--title">Fill evenly</span>
64
    <Stack verticalType={Stack.VERTICAL_TYPE.FILL_EVENLY} preview>
65
      <StackItem>
66
        <div className="nr1-Box--a">1</div>
67
      </StackItem>
68
      <StackItem>
69
        <div className="nr1-Box--b">2</div>
70
      </StackItem>
71
      <StackItem>
72
        <div className="nr1-Box--c">3</div>
73
      </StackItem>
74
    </Stack>
75
  </div>
76
</div>;

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

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