Drawer

Um painel que entra por uma borda da tela, por cima do conteúdo, aberto por um botão. A pessoa usa, fecha, e volta para onde estava.

Nesta página

Playground

Borda

Rodapé

Fundo

HTML

<button class="feitio-button" type="button" popovertarget="pg-drawer">Abrir o painel</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filtros"><div class="drawer-header"><h2>Filtros</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-drawer" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fechar</button></div><div class="drawer-body"><p>Os filtros da lista.</p></div></div>

Quando usar

Para a navegação do produto no mobile (o AppShell).
Para filtros de uma lista no mobile, ou os detalhes de um item sem sair da lista.

Quando não usar

Para confirmar: Dialog.
Formulário longo: uma página.
Uma gaveta abrindo outra: nunca.

Exemplos

Por qualquer borda

Direita (o padrão), esquerda, cima ou baixo. Título e rodapé são opcionais; o Fechar, pequeno, está sempre lá. Fecha com Esc ou um toque fora.

Mostrar código

HTML

<button type="button" class="feitio-button" popovertarget="filtros">…Filtros</button>
<div class="feitio-drawer" id="filtros" popover role="dialog" aria-labelledby="filtros-t">
  <div class="drawer-header">
    <h2 id="filtros-t">Filtros</h2>                       <!-- opcional -->
    <button type="button" class="feitio-button close" data-size="small" popovertarget="filtros" popovertargetaction="hide">…Fechar</button>
  </div>
  <div class="drawer-body">…</div>
  <div class="drawer-footer">…</div>                      <!-- opcional -->
</div>

Anatomia

O que a gaveta guarda.

Cabeçalho: o título, opcional, e o Fechar, pequeno, no canto.
Corpo: o conteúdo; rola sozinho.
Rodapé, opcional: a ação, fora da rolagem.

Estados

Abrindo e fechando: desliza, e o fundo escurece.
Aberta: Esc, Fechar ou um toque fora fecham; o foco volta para o botão que abriu.
Fechada: não ocupa lugar nem recebe foco.

Bons e maus padrões

Faça assim

Filtros numa gaveta, com a ação dizendo o resultado: "Mostrar 12 resultados".

A pessoa sabe o que acontece antes de fechar.

Não faça

"Tem certeza que quer apagar?" dentro de uma gaveta.

A gaveta fecha com um toque fora; uma decisão não pode ser por acidente.

O botão aponta para a gaveta (popovertarget); o navegador diz se ela está aberta.
A gaveta tem nome: o título, ou aria-label sem título.

Atributos

Atributo	Valores	Para quê
`class="feitio-drawer"` + `popover`	obrigatório	A gaveta, fora da tela até abrir.
`data-side`	`"end"`, `"start"`, `"top"`, `"bottom"`	Por qual borda ela entra.
`class="drawer-header"`, `"drawer-body"`, `"drawer-footer"`	as partes	Cabeçalho, corpo e rodapé (opcional).