Drawer 🗑️
Este componente está descontinuado. Substitua pelo Drawer next. Para mais informações sobre os recursos next leia a documentação.
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.
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.