Drawer
- Angular:
mds-float-panel - CSS/HTML (mds-styles): FloatPanel type=drawer
- Figma: ❌
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Drawer é um painel deslizante que emerge da lateral da tela para fluxos de entrada de dados ou navegação. Ele permite realizar tarefas complexas, como preencher formulários, sem que o usuário perca totalmente o contexto da página principal.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Uso: Formulários de cadastro, edição de itens e menus globais.
- Título: Use Caixa de Título no topo do painel para identificar a ação (ex: Novo Motorista).
- Ações: Os botões de ação (Salvar, Cancelar) devem ficar fixos no rodapé do Drawer.
- Saída: Deve permitir o fechamento ao clicar fora (backdrop) ou em um ícone de “X”.
Sugestão padronização
Seção intitulada “Sugestão padronização”Adotar os nomes Modal e Drawer como componentes distintos no Design System, unificando o “FloatPanel” do Angular sob essas duas categorias.
- Drawer (Painel Lateral): Focado em fluxos de trabalho. Ideal para formulários de cadastro ou edição. Por abrir na lateral, ele permite que o usuário ainda veja parte da tabela ou mapa ao fundo, mantendo o contexto.
- Modal (Diálogo Central): Focado em interrupção ou detalhamento. Ideal para confirmações críticas (Excluir), alertas ou visualização de dados que ocupam muito espaço e exigem foco total.