NewsKit Mobile 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:

flowFlow.VerticalLeft | Flow.VerticalCenter | Flow.VerticalRight | Flow.HorizontalTop | Flow.HorizontalCenter | Flow.HorizontalBottom = Flow.Vertical
If provided, defines the flow direction of the stack contents.
inlineboolean
If provided, changes the `display` to inline-flex.
stackDistributionStackDistribution = StackDistribution.SpaceAround
If provided, defines the type of spacing used to layout the items in the stack.
spaceInlinestring
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.
spaceStackstring
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.
wrapwrap | nowrap
If provided, defines if the content of the stack wraps.
listboolean
If provided, the stack container renders as 'ul' and every child element is wrapped inside a 'li'.
flexGrowboolean | number
CSS property sets the flex grow factor of a flex item main size. More information
flexShrinkboolean | 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
flowReverseboolean
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
Props
Stack Flow
Inline
Stack Distribution
spaceInline
Space Stack
Wrap
List
import React from 'react';
import { Stack } from 'newskit';

export default () => (
  <Stack
    flow="vertical-left"
    stackDistribution="flex-start"
    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:

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