Component Props
Por que importa
Props conectam dados dinâmicos à estrutura do componente, permitindo reaproveitar o mesmo layout com conteúdos diferentes. O posicionamento consistente evita duplicação e erros em coleções.
Forma canônica (sintaxe mínima)
Template com dois `%props`
Por quê: demonstra como cada valor separado por | preenche o %prop correspondente.
Padrões de uso
Props em listas
Quando usar: gerar linhas repetidas com dados que mudam a cada item. Por quê: cria coleções extensíveis sem duplicar estrutura manualmente.
Props com ações
Quando usar: parametrizar destinos de botões e textos no mesmo componente. Por quê: facilita ajustes futuros do fluxo trocando somente os valores usados nas props.
Props com percentuais e tendências
Quando usar: atualizar métricas com múltiplos campos sem alterar o layout. Por quê: mantém a apresentação das métricas alinhada mesmo com novos dados.
Erros comuns (Do/Don’t)
❌ Errado — Valor extra sem placeholder
✅ Correto — Props alinhados
Por quê: valores extras ficam sem destino, gerando inconsistências na renderização.
❌ Errado — `%title` usado como label e ação
✅ Correto — Props separados
Por quê: separar props mantém clareza semântica e facilita ajustes futuros.
Referências cruzadas
Relacionados
Component Definition: ensina a estruturar o componente que receberá props.Component List: renderiza coleções de componentes com dados tabulares.Component Composition: combina componentes parametrizados entre si.List: fornece dados em formato- valor | valorpara alimentar props.
Composições recomendadas
- Component Props + List → coleções dinâmicas sem duplicar layout.
- Component Props + Grid → dashboards com métricas parametrizadas.
- Component Props + Modal → formularios ou confirmações reaproveitados.
Props aplicados em modal reutilizável
Por quê: parametriza título, mensagem e ações mantendo uma única estrutura de modal.