Drawer
Painel lateral sobreposto (USlideOver / UDrawer) — carrinho, mensagens, Genius e anexos.
Componente base do Nuxt UI (
USlideOver/UDrawer), ainda não internalizado no EletroDS — o ME o usa para os painéis transversais e para anexos. Confira o comportamento antes de usar.O Drawer é um painel que desliza sobre o conteúdo, sem tirar o usuário da tela. No ME ele carrega o que é transversal ou complementar ao contexto atual.
Onde o ME usa
| Uso | Lado | Observação |
|---|---|---|
| Carrinho | Direita (#right-area do MeLayout) | Carrinho XOR Mensagens — nunca os dois juntos; troca conforme o contexto. |
| Mensagens (chat) | Direita (#right-area) | Painel contextual; no desktop pode expandir para tela cheia. |
| Genius | Direita / assistente | Idem — expande no desktop. |
| Anexos | Drawer (nunca modal) | Anexos de um documento abrem em drawer, não em modal. |
Boas práticas
- Anexos e painéis contextuais → drawer, não modal. Modal é para confirmação irreversível ou fluxo que exige foco total (ver Modal).
#right-areado chassi aloja um transversal por vez (Carrinho XOR Mensagens); a troca é mutuamente exclusiva.- Mobile: o drawer ocupa quase toda a largura e desliza da lateral; fecha tocando fora (scrim). Sem "X" quando o padrão for fechar por fora.
- Título + fechar no topo; conteúdo rola por dentro; ações fixas no rodapé quando houver.
Quando NÃO usar
- Confirmação destrutiva/irreversível — use Modal.
- Conteúdo que é a própria tela (não complementar) — use a estrutura da tela (Documento/Index).
Onde se aplica
Usado nos anexos do documento: pré-visualização de um arquivo (ver sem baixar) e, nos grupos de anexos (agrupador de um mesmo tipo), o drawer para inserir novos e ver os já importados. Também nos transversais (Carrinho · Mensagens · Genius).