Drawer
Drawers exibem painéis laterais sobre a tela atual para oferecer filtros, detalhes ou ações auxiliares sem quebrar o contexto.
Quando usar
- Expor filtros avançados enquanto a tela principal permanece visível.
- Mostrar detalhes de um item selecionado sem navegar para outra rota.
- Oferecer menus contextuais quando o espaço horizontal está disponível.
- Complementar fluxos que precisam de feedback rápido após uma ação principal.
Exemplo básico
Drawer de filtros em dashboard
Por quê: mantém indicadores visíveis enquanto a pessoa ajusta critérios no painel lateral.
Variantes
Drawer com stack para configurações
Quando usar: organizar controles simples com espaçamento consistente. Por quê: distribui ajustes rápidos no painel sem poluir a tela principal.
Drawer com lista resumida
Quando usar: apresentar resumos curtos que complementam a tela principal. Por quê: mantém contexto rápido à mão enquanto a tela principal segue visível.
Drawer com formulário contextual
Quando usar: capturar entradas rápidas enquanto a pessoa analisa outro conteúdo. Por quê: o drawer oferece formulário breve sem interromper a navegação atual.
Composição (usando com outros)
- Drawer + Button — aciona o painel a partir de CTAs contextuais.
- Drawer + List — apresenta coleções resumidas com ações fora da lista.
- Drawer + Screen principal — mantém fluxo contínuo sem redirecionar.
Tela com drawer de detalhes
Por quê: permite investigar dados sem sair da lista principal.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
nome | identificador | — | Define o slug do drawer (PascalCase recomendado). | Sim |
conteúdo interno | blocos DSL | — | Recebe stacks, containers, cards, listas e formulários. | Sim |
ações de fechamento | botões | — | Normalmente @ghost[Fechar](close) ou @ghost[Cancelar](-1). | Sim |
acionadores | botões/links | — | Elementos que chamam o drawer (@[Abrir](DrawerName)). | Sim |
Erros comuns (Do/Don’t)
❌ Errado — Lista com links navegáveis
✅ Correto — Navegação estruturada
Por quê: menus interativos devem usar navigator para manter semântica correta.
❌ Errado — Fechamentos inconsistentes
✅ Correto — Padrão consistente
Por quê: manter um único padrão evita confusão sobre o comportamento do fechamento.
Referências cruzadas
Relacionados
Modal: variação sobreposta para confirmações rápidas.Navigator: constrói menus e abas para navegação lateral.Drawer Detail: guia com receita completa para detalhes no drawer.Button: principal acionador para abrir drawers.
Composições recomendadas
- Drawer + Button → painel acionado sob demanda mantendo contexto.
- Drawer + List → exibe resumos enquanto a tela principal fica visível.
- Drawer + Modal → combine quando precisar confirmar ações iniciadas no drawer.
Fluxo drawer + modal
Por quê: inicia ajustes no drawer e confirma em modal separado para reforçar a decisão.