Slots e Composição
Slots são "espaços reservados" dentro de um componente que permitem injetar qualquer outro conteúdo. É a base do conceito de Composição, que favorece a flexibilidade em vez da criação de infinitas propriedades.
Por que slots existem?
Imagine um componente de Card. Um card pode ter uma imagem, um título, um botão, um gráfico ou uma lista. Se tentássemos criar uma prop para cada possibilidade, o componente seria impossível de manter. Com slots, o Card apenas define a "moldura" e o desenvolvedor/designer decide o que colocar dentro.
Como slots evitam duplicação?
Em vez de criar CardComBotao, CardComImagem e CardDeGrafico, criamos apenas o componente Card com um slot de content. Isso reduz drasticamente a quantidade de código e de componentes no Figma.
Conceito de Composição
Composição é a ideia de construir interfaces complexas combinando peças menores e independentes.
- Exemplo: Um
Modal(organizador) + umTextField(conteúdo) + umButton(ação).
Exemplos comuns de Slots
- Leading: Espaço no início (geralmente para ícones ou avatares).
- Content: O corpo principal do componente.
- Trailing: Espaço no final (geralmente para setas, checkboxes ou badges).
Como fazer vs Como não fazer
✅ Como fazer
- Use slots para componentes de layout como Cards, Modais, ListItems e Headers.
- No Figma, use a funcionalidade de "Component swapping" (instância) nos slots para mostrar as possibilidades de uso.
- Documente quais tipos de componentes são esperados em cada slot (ex: "O slot leading espera um Ícone de 24px").
❌ Como não fazer
- Criar props booleanas como
hasIcon,hasButton,hasTitle. Use slots para que o componente seja naturalmente flexível. - Tentar controlar o espaçamento interno do conteúdo injetado no slot a partir do componente pai. O conteúdo deve ser responsável por si mesmo.
- Criar um novo componente toda vez que o conteúdo interno mudar, ignorando o potencial de reutilização da "moldura".