Pular para o conteúdo principal

Drawer​

Componente Drawer

📘 Modo de Uso​

O Drawer exibe informações ou opções adicionais em uma área deslizante da tela, geralmente acionada pelo usuário.
Ele é indicado para conteúdos que não precisam estar sempre visíveis, mas que devem estar facilmente acessíveis sob demanda.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.surfaces.component.drawer

🛡️ Boas Práticas e Acessibilidade​

  • Não use para informações críticas: o conteúdo do drawer só é acessível quando aberto.
  • Use títulos ou labels claros: drawers sem título ainda precisam de labels acessíveis. Prefira a variante com título.
    • WCAG 2.1: 1.3.1 Informações e Relacionamentos, 2.4.6 Títulos e Rótulos.
  • Gerencie o foco corretamente: enquanto aberto, o drawer deve capturar o foco do teclado e impedir interação com a página até ser fechado.
    • WCAG 2.1: 2.1.1 Teclado, 2.1.2 Sem Armadilha de Teclado, 2.4.3 Ordem de Foco.