Stack

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

Uso

Stack is concerned with one-dimensional layouts, while Grid that handles two-dimensional layouts. The default direction is column which stacks children vertically.

Item 1

Item 2

Item 3

<Stack spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Para controlar o espaço entre os filhos, use a prop spacing The spacing value can be any number, including decimals and any string. As props são convertidas em css usando o auxiliar theme.spacing()

Direção

By default, Stack arranges items vertically in a column. However, the direction prop can be used to position items horizontally in a row as well.

Item 1

Item 2

Item 3

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Divisores

Use the divider prop to insert an element between each child. This works particularly well with the Divider component.

Item 1

Item 2

Item 3

<Stack
  direction="row"
  divider={<Divider orientation="vertical" flexItem />}
  spacing={2}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Valores responsivos

You can switch the direction or spacing values based on the active breakpoint.

Item 1

Item 2

Item 3

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Interativo

Abaixo está uma demonstração interativa que permite explorar os resultados visuais das diferentes configurações:

Item 1

Item 2

Item 3

<Stack
  direction="row"
  justifyContent="center"
  alignItems="center"
  spacing={2}
>

System props

As a CSS utility component, the Stack supports all system properties. You can use them as props directly on the component. For instance, a margin-top:

<Stack mt={2}>

API

<Stack />