Stack & Stack Child

Stack Overview

The Stack component is a low-level foundational component used to layout items in a horizontal or vertical stack, with even spacing between the items. Distribution requires the Stacks parent to have a width and height values set.

Stack Props

The Stack has a number of props to facilitate a variety of uses. Custom and required props are detailed below:

If provided, defines the flow direction of the stack contents.

inlineMQ<boolean>

If provided, changes the `display` to inline-flex.

stackDistributionMQ<StackDistribution> = StackDistribution.SpaceAround

If provided, defines the type of spacing used to layout the items in the stack.

spaceInlineMQ<string>

When the Stack has a horizontal flow, this property is used to set horizontal spacing between each item. When the Stack has a vertical flow, this property is used to set vertical spacing between each item.

spaceStackMQ<string>

When the Stack has a horizontal flow and its items are allowed to wrap, this property is used to set space between the rows. When the Stack has a vertical flow and its items are allowed to wrap, this property is used to set space between the columns.

heightMQ<string> = 100%

If provided, defines the height of the Stack. In a scenario where we have a Stack with siblings within a container that has defined height, we would need to set height:auto to the Stack, otherwise the container wouldn't calculate it's own height correctly.

wrapMQ<wrap | nowrap | wrap-reverse>

If provided, defines if the content of the stack wraps.

listMQ<boolean>

If provided, the stack container renders as 'ul' and every child element is wrapped inside a 'li'.

flexGrowMQ<boolean | number>

CSS property sets the flex grow factor of a flex item main size. More information

flexShrinkMQ<boolean | number>

CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.More information

flowReverseMQ<boolean>

If true, add a '-reverse' suffix to the flex direction property: row-reverse or column-reverse.More information

ariaLabelstring

The aria-label attribute is recommended to be used when the stack is rendered as a list. This will allow screen readers to label the content of the list.

## Playground

This

Stack

Example

Showing

Multiple

Tags

1import React from 'react';
2import { Stack } from 'newskit';
3
4export default () => (
5  <Stack
6    flow="vertical-left"
7    stackDistribution="flex-start"
8    height="100%"
9    wrap="nowrap"
10    ariaLabel="list content label"
11  />
12);
13

## StackChild Overview The StackChild component is used to introduce custom order for the children of Stack. It is required for the component to be used within a `Stack`. It's behaviour is derived from the functionality of a child element in a classic `flex` container. ## StackChild Props The Stack has a number of props to facilitate a variety of uses. Custom and required props are detailed below:

orderMQ<number>

Defines the order of the element within the stack.

Usage

Tag 1

Tag 2

Tag 3

1<Stack>
2    <StackChild order={3}>
3      <Tag>Tag 1</Tag>
4    </StackChild>
5    <StackChild order={1}>
6      <Tag>Tag 2</Tag>
7    </StackChild>
8    <StackChild order={2}>
9      <Tag>Tag 3</Tag>
10    </StackChild>
11</Stack>