Component Definition
Por que importa
Componentes definidos com component Nome: concentram estrutura, estilo e comportamento visual em um só lugar. Eles evitam duplicação, facilitam manutenção e garantem consistência em telas complexas.
Forma canônica (sintaxe mínima)
Definição e instância básica
Por quê: demonstra o ciclo completo — declarar o componente e instanciá-lo com dados via lista.
Padrões de uso
Componentes para vitrines de métricas
Quando usar: replicar o mesmo layout com dados diferentes em dashboards e relatórios. Por quê: reduz manutenção ao trocar apenas os valores, não o markup.
Componente para linhas de lista
Quando usar: padronizar linhas de lista que exigem múltiplos campos e ações. Por quê: encapsula lógica de exibição e mantém consistência em toda a lista.
Componente com fallback interno
Quando usar: oferecer vazio padrão para diferentes contextos sem reescrever layout. Por quê: padroniza estados vazios com mensagem, ação e visual coerentes.
Erros comuns (Do/Don’t)
❌ Errado — Instância sem definição
✅ Correto — Declaração + uso
Por quê: a instância precisa conhecer a estrutura para interpolar %props.
❌ Errado — Props faltando
✅ Correto — Props completos
Por quê: a ordem dos valores precisa corresponder a cada %prop declarado.
Referências cruzadas
Relacionados
Component Props: detalha interpolação e manipulação de%props.Component List: gera coleções a partir de componentes.Component Composition: orienta como combinar componentes entre si.List: alimenta componentes com dados tabulares.
Composições recomendadas
- Component Definition + List → repete um layout para cada item de dados.
- Component Definition + Grid → monta vitrines e dashboards reutilizáveis.
- Component Definition + Modal → cria modais padronizados para confirmação ou formulários.