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
To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.