Diretrizes de composição
Por que importa
Compor elementos corretamente garante experiências coerentes: blocos ficam compreensíveis, CTA têm hierarquia clara e layouts permanecem responsivos. As diretrizes reduzem retrabalho e previnem conflitos visuais ao combinar componentes.
Forma canônica (sintaxe mínima)
Composição entre container, stack e row
Por quê: ilustra a combinação básica de layouts verticais e horizontais mantendo espaçamento e hierarquia.
Layouts não usam hífen como marcador
Ao gerar DSL — manualmente ou via LLM — mantenha filhos de layouts (stack, row, card, container) apenas por indentação. O prefixo - é reservado para list, navigator e fab; usar hífen em outros blocos cria nós inválidos e confunde quem mantém o código.
Padrões de uso
Row-between + Stack para cabeçalhos ricos
Quando usar: apresentar contexto textual e CTA principal na mesma faixa. Por quê: distribui responsabilidades entre blocos sem criar aninhamentos desnecessários.
List + Component Definition para coleções
Quando usar: repetir estrutura de item com dados variáveis. Por quê: garante consistência visual e facilita futuras composições (ex.: colocar em cards).
Card + Row-end para rodapés de ação
Quando usar: fechar blocos com opções de saída e avanço organizadas. Por quê: o rodapé separado evita confusão com o conteúdo principal do card.
Erros comuns (Do/Don’t)
❌ Errado — Card dentro de card
✅ Correto — Stack dentro do card
Por quê: evita bordas repetidas e mantém a hierarquia visual limpa.
❌ Errado — Stack com sintaxe de lista
✅ Correto — Stack com itens alinhados
Por quê: apenas list, navigator e fab usam -; layouts consideram os filhos pela indentação.
❌ Errado — Botões dentro de list
✅ Correto — Ações no rodapé
Por quê: respeita a função textual da lista e preserva acessibilidade.
❌ Errado — Fluxo sem saída
✅ Correto — Fluxo encerrado
Por quê: evita bloqueios e garante que a composição sustente o fluxo esperado.
Referências cruzadas
Relacionados
Component Composition: aprofunda combinações entre componentes.Row: base para alinhar ações horizontais.Stack: empilha conteúdos mantendo espaçamento controlado.List: catálogo textual usado em diversas composições.
Composições recomendadas
- Diretrizes de composição + Component Composition → estruturas escaláveis com componentes auxiliares.
- Diretrizes de composição + Screen → telas coerentes com hierarquia clara.
- Diretrizes de composição + Drawer Detail → detalhes laterais alinhados com listas principais.
Tela aplicando múltiplas diretrizes
Por quê: combina row-between, list e drawer seguindo as boas práticas descritas.