Pilha

A pilha põe espaço entre as coisas. É um contentor flex com uma única função, e é a resposta à maioria das perguntas do género «como afasto isto» — na vertical por predefinição, na horizontal com direction: 'row'.

Os intervalos vêm da escala de espaçamento, por isso o ritmo de uma página mantém-se coerente sem ninguém escolher valores em píxeis.

Pilha básica

Primeiro

Segundo

Terceiro

stack({ gap: 'md' },
  card(cardBody('Primeiro')),
  card(cardBody('Segundo')),
  card(cardBody('Terceiro')),
)

Direção

stack({ direction: 'row', gap: 'md' },
  button('Um'),
  button({ variant: 'outline' }, 'Dois'),
  button({ variant: 'outline' }, 'Três'),
)

Intervalo

Um nome de token ('xs' … '3xl'), um número de unidades de espaçamento, ou um comprimento CSS em bruto.

xsxsxs

mdmdmd

6 unidades6 unidades

3rem3rem

stack({ gap: 'lg' },
  stack({ direction: 'row', gap: 'xs' }, chip('xs'), chip('xs'), chip('xs')),
  stack({ direction: 'row', gap: 'md' }, chip('md'), chip('md'), chip('md')),
  stack({ direction: 'row', gap: 6 }, chip('6 unidades'), chip('6 unidades')),
  stack({ direction: 'row', gap: '3rem' }, chip('3rem'), chip('3rem')),
)

Alinhamento

align e justify aceitam valores de flexbox em bruto, por isso serve tudo o que o CSS entende.

iníciofim

e alinhado

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm', justify: 'space-between', style: 'background: var(--su-surface-2); padding: 0.6rem; border-radius: 0.5rem' },
    chip('início'),
    chip('fim'),
  ),
  stack({ direction: 'row', gap: 'sm', justify: 'center', align: 'center', style: 'background: var(--su-surface-2); padding: 0.6rem; border-radius: 0.5rem' },
    button({ size: 'sm' }, 'Centrado'),
    chip('e alinhado'),
  ),
)

Mudança de linha

Uma fila de chips ou botões que pode não caber precisa de wrap — sem ele espremem-se em vez de passarem para a linha seguinte.

routingdataislandsimagespagefindlighthousesitemaprss

stack({ direction: 'row', gap: 'sm', wrap: true },
  ...['routing', 'data', 'islands', 'images', 'pagefind', 'lighthouse', 'sitemap', 'rss'].map(
    (name) => chip({ color: 'neutral' }, name),
  ),
)

Inline

inline torna a pilha um inline-flex, por isso ela assenta numa linha de texto em vez de ocupar toda a largura.

Feito com

sitelovite

e mais nada.

text(
  'Feito com ',
  stack({ direction: 'row', gap: 'xs', inline: true, align: 'center' },
    chip({ color: 'primary', size: 'sm' }, 'sitelo'),
    chip({ color: 'neutral', size: 'sm' }, 'vite'),
  ),
  ' e mais nada.',
)

Como outro elemento

stack({ as: 'nav', direction: 'row', gap: 'sm' },
  navLink({ href: '/pt/docs' }, 'Documentação'),
  navLink({ href: '/pt/ui', current: true }, 'UI'),
  navLink({ href: '/pt/examples' }, 'Exemplos'),
)

Props

Prop	Tipo	Predefinição	Descrição
`direction`	`'row' \| 'column'`	`'column'`	Eixo principal.
`gap`	`Space`	`'md'`	Espaço entre os filhos.
`align`	`string`	`'stretch'`	Qualquer valor de align-items.
`justify`	`string`	`'flex-start'`	Qualquer valor de justify-content.
`wrap`	`boolean \| string`	`false`	true significa mudar de linha; uma cadeia passa como flex-wrap.
`inline`	`boolean`	`false`	Desenhada como inline-flex.
`as`	`string`	`'div'`	Elemento a renderizar, por exemplo nav ou ul.