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. 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. Você pode usá-los como "props" diretamente no componente. For instance, a margin-top:

<Stack mt={2}>

API

<Stack />