Pharos
Navegar componentes
← Componentes

Stack

LayoutExemplo
Stack organiza itens em linha ou coluna com espaçamento consistente. Use a prop gap para controlar o espaço entre itens.
Importação
import {Stack} from '@pharos-ds/core/Stack';

Exemplos

Área interativa

direction
gap
wrap
align
AlfaBetaGama
Código
import {Stack} from '@pharos-ds/core/Stack';

<Stack
  direction="vertical"
  gap="2"
  wrap="nowrap"
  align="start"
 />

Boas práticas

  • Faça: Use a prop gap para espaçamento entre itens; não adicione margens manualmente.
  • Faça: Use StackItem com size="fill" para fazer um item esticar e preencher o espaço sobrante.
  • Evite: Aninhe stacks dentro de stacks; tente wrap="wrap" primeiro para deixar itens fluírem para a próxima linha.

Props

Nenhuma prop documentada. Rode npx @pharos-ds/cli component Stack.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Stack
Stack · Pharos