Stack
Stacks empilham elementos verticalmente, controlando o espaçamento entre blocos de conteúdo.
Quando usar
- Organizar títulos, textos e ações em sequência lógica.
- Montar formulários com múltiplos campos e botões alinhados.
- Alternar densidade de leitura com variantes
tight,looseeflush. - Agrupar componentes reutilizáveis mantendo hierarquia visual coesa.
Exemplo básico
Stack em card de orientações
Por quê: combina textos e ação em blocos verticais com espaçamento confortável.
Evite hífens automáticos em layouts
Mesmo que um LLM sugira - antes de cada linha, stack, row, card e demais layouts esperam apenas filhos indentados. Use hífen somente em list, navigator e fab para impedir que a sintaxe gere nós inválidos.
Variantes
Stack padrão
Quando usar: organizar conteúdos variados com espaçamento mediano. Por quê: equilibra textos, inputs e ações sem gerar blocos soltos.
Stack-tight para itens curtos
Quando usar: agrupar itens curtos ou checklists sem perder legibilidade. Por quê: o gap reduzido aproxima conteúdos relacionados e acelera leitura.
Stack-flush para cards compactos
Quando usar: empilhar elementos que já possuem padding próprio. Por quê: evita espaçamento duplo quando os componentes internos já trazem margem.
Composição (usando com outros)
- Stack + Card — coloca conteúdos sequenciais dentro de um bloco estruturado.
- Stack + Row — mistura distribuição vertical e horizontal na mesma área.
- Stack + Component Definition — reutiliza blocos padronizados em várias telas.
Formulário com stack e row
Por quê: separa campos verticalmente e alinha ações no rodapé.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
stack | layout vertical | stack | Empilha elementos com espaçamento padrão. | Não |
stack-tight, stack-loose, stack-flush | variações | — | Ajustam densidade entre itens (compacto, amplo, sem gap). | Não |
conteúdo interno | blocos DSL | — | Itens empilhados, como textos, inputs e componentes. | Sim |
Erros comuns (Do/Don’t)
❌ Errado — Stack com botões lado a lado
✅ Correto — Ações horizontais
Por quê: stacks tratam a ordem vertical; rows cuidam de alinhamento horizontal.
❌ Errado — Textos longos sem respiro
✅ Correto — Espaço adequado
Por quê: conteúdo amplo precisa de espaçamento maior para manter a leitura confortável.
Referências cruzadas
Relacionados
Row: complementa stacks quando é preciso alinhar ações na horizontal.Card: envolve stacks com título e contexto.Container: estrutura principal antes de incluir stacks.Component Definition: cria blocos reutilizáveis empilhados.
Composições recomendadas
- Stack + Row-end → formulários com ações alinhadas.
- Stack + Card + List → seções de conteúdo com resumos textuais.
- Stack + Component Definition → layouts reutilizáveis com dados variáveis.
Stack com componente reutilizável
Por quê: evita duplicação ao empilhar componentes com dados diferentes.