Newskit Logo

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:

flowMQ<Flow.VerticalLeft | Flow.VerticalCenter | Flow.VerticalRight | Flow.VerticalStretch | Flow.HorizontalTop | Flow.HorizontalCenter | Flow.HorizontalBottom | Flow.HorizontalStretch> = Flow.Vertical
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
Is
A
Stack
Example
Showing
Multiple
Tags
Stack Flow
Inline
Stack Distribution
spaceInline
Space Stack
Height
Wrap
List
import React from 'react';
import { Stack } from 'newskit';

export default () => (
  <Stack
    flow="vertical-left"
    stackDistribution="flex-start"
    height="100%"
    wrap="nowrap"
    ariaLabel="list content label"
  />
);

## 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
<Stack>
    <StackChild order={3}>
      <Tag>Tag 1</Tag>
    </StackChild>
    <StackChild order={1}>
      <Tag>Tag 2</Tag>
    </StackChild>
    <StackChild order={2}>
      <Tag>Tag 3</Tag>
    </StackChild>
</Stack>