Stack

O componente Stack gerencia o leiaute de filhos imediatos ao longo do eixo vertical ou horizontal com espaçamento e/ou divisão opcional entre cada filho.

Uso

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

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

The default direction is column which stacks children vertically. 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 />