O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Gaveta de navegação

A gaveta de navegação no mdui pode deslizar a partir do lado esquerdo ou direito da página, e uma página pode ter múltiplas gavetas de navegação.

O comportamento da gaveta de navegação é diferente em celulares, tablets e dispositivos desktop. Você pode observar as mudanças na gaveta de navegação do lado esquerdo desta página alterando a largura do navegador:

Altura
- Em celulares e tablets, a altura da gaveta de navegação é sempre 100%.
- Em dispositivos desktop, a gaveta de navegação por padrão não cobre a barra de aplicativos, havendo um espaço igual à altura da barra de aplicativos no topo da página. Adicionar a classe .mdui-drawer-full-height pode tornar a altura da gaveta de navegação 100%. Nesse caso, a gaveta pode cobrir a barra de aplicativos; você pode adicionar a classe .mdui-appbar-inset à barra de aplicativos para que ela não seja coberta.
Cor de fundo e sombra
- Em celulares e tablets, a gaveta de navegação tem fundo branco e sombra por padrão.
- Em dispositivos desktop, a gaveta de navegação tem fundo transparente e não possui sombra por padrão. Adicionar a classe .mdui-color-[color] permite definir a cor de fundo e adiciona uma sombra.
Estado de exibição
- Em celulares e tablets, a gaveta de navegação fica oculta por padrão.
- Em dispositivos desktop, a gaveta de navegação é exibida por padrão.
- Adicionar a classe .mdui-drawer-open faz com que a gaveta de navegação seja exibida por padrão em todos os dispositivos; adicionar a classe .mdui-drawer-close faz com que ela seja ocultada por padrão em todos os dispositivos.
Overlay
- Em celulares e tablets, uma camada de sobreposição (overlay) é sempre exibida ao abrir a gaveta de navegação.
- Em dispositivos desktop, a camada de sobreposição não é exibida por padrão ao abrir a gaveta de navegação. Definir o parâmetro overlay como true exibirá a camada de sobreposição ao abri-la. Se configurado para mostrar a camada de sobreposição, a classe .mdui-drawer-close deve ser adicionada para que a gaveta de navegação fique oculta por padrão.

Como usar

(Se o componente for gerado dinamicamente, ele precisa ser inicializado chamando mdui.mutation())
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Padrões - Gaveta de navegação

Como usar

Estrutura HTML

<!-- A classe mdui-drawer-body-left adiciona padding-left ao corpo (body). Essa classe deve ser adicionada sempre que houver uma gaveta de navegação aberta por padrão no lado esquerdo. -->
<!-- A classe mdui-drawer-body-right adiciona padding-right ao corpo (body). Essa classe deve ser adicionada sempre que houver uma gaveta de navegação aberta por padrão no lado direito. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- Gaveta de navegação padrão à esquerda -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Para colocar a gaveta de navegação à direita, adicione a classe mdui-drawer-right -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Chamar via atributos personalizados

Este método não requer código JavaScript. Basta adicionar o atributo mdui-drawer="options" a um elemento de controle (por exemplo, um botão). Ao chamar via atributo personalizado, um parâmetro target adicional deve ser adicionado para especificar a gaveta de navegação controlada, cujo valor é o seletor CSS da gaveta.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

Atributos podem ser adicionados a elementos dentro da gaveta de navegação para vincular eventos; esses atributos também podem ser usados com chamadas JavaScript.

Atributo	Descrição
`mdui-drawer-close`	Clicar neste elemento disparará o evento `close.mdui.drawer` e fechará a gaveta de navegação.

Chamar via JavaScript

// selector é o seletor CSS ou elemento DOM da gaveta de navegação
// options são os parâmetros de configuração, veja a lista abaixo
var inst = new mdui.Drawer(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`overlay`	`boolean`	`false`	Se deve exibir a camada de sobreposição ao abrir a gaveta de navegação. Este parâmetro só é válido para telas médias e maiores; em telas muito pequenas e pequenas, a sobreposição é sempre exibida.
`swipe`	`boolean`	`false`	Se deve habilitar gestos de deslizar.

Método

Nome do método	Descrição
`open`	Mostra a gaveta de navegação.
`close`	Oculta a gaveta de navegação.
`toggle`	Alterna o estado de exibição da gaveta de navegação.
`getState`	Retorna o estado atual da gaveta de navegação. Inclui quatro estados (`opening`, `opened`, `closing`, `closed`).

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`open.mdui.drawer`	O evento será disparado quando a animação de abertura da gaveta de navegação começar.	`<div class="mdui-drawer"></div>`	`event._detail.inst`: Instância
`opened.mdui.drawer`	O evento será disparado quando a animação de abertura da gaveta de navegação terminar.
`close.mdui.drawer`	O evento será disparado quando a animação de fechamento da gaveta de navegação começar.
`closed.mdui.drawer`	O evento será disparado quando a animação de fechamento da gaveta de navegação terminar.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-drawer`	Define uma gaveta de navegação.
`.mdui-drawer-right`	Gaveta de navegação no lado direito da página.
`.mdui-drawer-full-height`	Faz com que a gaveta de navegação ocupe 100% da altura.
`.mdui-drawer-open`	Faz com que a gaveta de navegação fique aberta por padrão.
`.mdui-drawer-close`	Faz com que a gaveta de navegação fique oculta por padrão.
`.mdui-drawer-body-left`	Adiciona `padding-left` ao `body`.
`.mdui-drawer-body-right`	Adiciona `padding-right` ao `body`.

Barra de aplicativo

Barra de navegação inferior