Drawer Next
Uso
A Drawer é um componente de sobreposição lateral que permanece oculto na maior parte do tempo e desliza sobre o conteúdo da página quando acionada.
Use a Drawer para:
- Configurações específicas de um recurso
- Visualização rápida de informações, ajuda ou consulta
- Ferramentas e opções laterais em fluxos que não exigem sair da página atual
Tamanhos
A altura da Drawer é fixa e respeita a altura total do navegador. A largura tem três tamanhos disponíveis:
- Pequeno (
sm): largura máxima de 300px - Médio (
md, padrão): largura máxima de 400px - Grande (
lg): largura máxima de 600px
Posicionamento
A Drawer sempre se posiciona na lateral direita da página.
Backdrop
Chamamos de backdrop a barreira de sobreposição entre o conteúdo da página e a Drawer quando ela está aberta.
Use a Drawer com backdrop por padrão. O fundo escurecido mantém o restante do conteúdo em segundo plano, bloqueia a interação com a página e mantém o foco na Drawer.
Remova o backdrop somente como exceção, quando o conteúdo da Drawer for complementar ao conteúdo da página.
Drawer ou Painel (Container.Panel)
Drawer e Container.Panel são componentes com responsabilidades diferentes.
Use a Drawer para apresentar uma tarefa secundária, funcionalidade ou informação que exija, preferencialmente, o foco total da pessoa. A Drawer sempre flutua sobre o conteúdo atual e, por padrão, impede a interação com o restante da página.
Use o Container.Panel para adicionar uma funcionalidade ou informação sem limitar o uso do restante da página (exceto quando o Container não tem espaço suficiente para exibi-lo, cenário onde o Painel passa a ser apresentado como uma Drawer).
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.