vaiperui

componentes / stack

Stack

Layout flex em uma direção com gap, alinhamento e divisor opcional.

Como usar

Alinha os filhos na vertical (padrão) ou na horizontal. `direction` pode mudar por breakpoint: `{ base: 'vertical', md: 'horizontal' }`. `divider` é renderizado entre cada par de filhos, nunca antes do primeiro nem depois do último.

preview
1
2
3
Stack.tsx
import { Divider, Stack } from "vaiperui";
 
<Stack direction={{ base: "vertical", md: "horizontal" }} gap={3} align="center"
  divider={<Divider orientation="vertical" />}>
  <span>One</span>
  <span>Two</span>
</Stack>

Direção

preview
1
2
3
vertical
1
2
3
horizontal
direcao.tsx
<Stack direction="vertical" />
<Stack direction="horizontal" />

Gap

preview
1
2
3
gap={0}
1
2
3
gap={1}
1
2
3
gap={2}
1
2
3
gap={4}
1
2
3
gap={8}
gap.tsx
<Stack direction="horizontal" gap={1} />
<Stack direction="horizontal" gap={8} />

Alinhamento e justify

preview
1
2
align="end"
1
2
3
justify="between"
alinhamento.tsx
<Stack direction="horizontal" align="end" />
<Stack direction="horizontal" justify="between" />

Divider

preview
1
2
3
divider
divider.tsx
<Stack divider={<Divider />}>...</Stack>

Props

PropValoresPadrãoDescrição
directionvertical | horizontal | { base, sm, md, lg, xl }verticalEixo principal, opcionalmente por breakpoint
gap0 | 1 | 2 | 3 | 4 | 6 | 84Espaço entre os filhos (passos de 4px)
alignstart | center | end | stretch | baselinenenhumAlinhamento no eixo cruzado (`align-items`)
justifystart | center | end | between | around | evenlynenhumDistribuição no eixo principal (`justify-content`)
wrapbooleanfalseDeixa os filhos quebrarem de linha
dividerReactNodenenhumElemento renderizado entre os filhos
asElementType"div"Elemento ou componente a renderizar (`section`, `ul`, `main`...)

Acessibilidade

  • Renderiza um `<div>` (flex) simples por padrão, sem papel; `as` troca o elemento (por exemplo `ul`, `nav`, `section`).
  • Não adiciona foco, teclado nem comportamento ARIA; props extras chegam ao elemento.
  • `direction` responsivo só muda a aparência; a ordem de leitura e de Tab continua sendo a do DOM.
  • A prop `divider` é inserida entre os filhos como foi passada, então um `Divider` ali é anunciado como separador, a menos que seja `decorative`.

Tenha em mente

  • Com `as="ul"`, um divider entre os itens vira filho do `ul` que não é `li`, o que é HTML inválido.