Drawer
A Drawer é uma estrutura que permite o acesso a conteúdos e configurações sem sair da página.
Tamanhos
A altura da Drawer é fixa, respeitando a altura total do navegador. Já a largura tem 3 tamanhos definidos, que podem ser usados de acordo com a necessidade:
- Pequeno: Largura máxima de 300px
- Médio (padrão): Largura máxima de 400px
- Grande: Largura máxima de 600px
Posicionamento
Existem 2 posições: direita ou esquerda - e cada uma tem uma forma de ser ativada e desativada.
Direita
Configuração específica em um asset, visualização rápida de informação para ajuda ou consulta. O acionamento é feito por link ou botão na página.
Já o mecanismo para fechar pode ser de duas formas: na própria Drawer, por meio de uma ação "fechar”, ou clicando fora da sua área. Para mais detalhes acesse nossa aba de exemplos.
Esquerda
Visualização como barra de opções e ferramentas para configurações. Exemplo: editores de Landing Pages.
Em relação à Navbar
Em geral, a Drawer que não é estrutural (persistente), como as de editores, deve sempre aparecer sobre a Navbar, como um painel externo.
Drawer persistente são painéis que funcionam como "barra de ferramentas" de uma funcionalidade. Em geral, ficam expostas, podendo ser minimizadas ou redimensionadas. Nestes casos, o posicionamento deve seguir a estrutura da ferramenta, podendo estar "dentro" da área útil da funcionalidade.
Overlay
A Drawer pode ser usada com uma camada mais escura (overlay) quando for necessário manter o foco apenas na Drawer.
Quando o conteúdo da Drawer for complementar ao conteúdo da página, não usar overlay.
Quando o conteúdo da Drawer for complementar ao conteúdo da página, recomenda-se não utilizar overlay.