Pular para o conteúdo
Faculdade PhorteDesign System

Gaveta

Em andamento

Um painel que entra pela lateral ou por baixo, sobre a página: o detalhe de um item sem sair da lista, os filtros no celular, o carrinho. É um diálogo modal — prende o foco, deixa o resto da página inerte e devolve o foco a quem abriu.

Função
Estado e aviso
Também chamado de
drawer, gaveta, painel lateral, sheet, bottom sheet, folha
Mora em
app/components/molecules/Gaveta.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Aberta, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Aberta
  2. Por baixo
  3. Interativa

Quando usar

Quando a tarefa pede mais espaço que uma pergunta, mas a pessoa volta para a mesma página depois: filtros no celular, o detalhe de um item da lista, o carrinho.

Faça

  • Dê um titulo que diga a tarefa ("Filtrar cursos"): ele nomeia o diálogo.
  • Ponha a ação principal no rodape ("Ver 12 cursos"), que fica fixo embaixo quando o conteúdo rola.
  • Use posicao="baixo" no celular e "direita" no computador, com o tamanho do conteúdo (320, 480 ou 640px).
  • Desligue fecharNoFundo em formulário longo: um clique errado perderia o que se escreveu.

Evite

  • Gaveta dentro de gaveta, ou uma gaveta que abre um Modal.
  • Navegação de várias etapas dentro dela: é uma página.
  • Tirar o botão "Fechar": a saída explícita é obrigatória.

Quando não usar. Para uma pergunta curta ou confirmação: o Modal. Para conteúdo que acompanha a página sem bloqueá-la: uma coluna da página, não um diálogo. Para navegar entre seções do site: o menu da Navbar.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Véu — Preto a 40% (`--veu-medio`) sobre a página. É só desenho: o clique fora do painel fecha pelo documento (E137), por padrão; um clique dentro do painel não fecha — testado na ficha.
  2. Painel — Em `--card`, com sombra; à direita, da altura da tela (320, 480 ou 640px); por baixo, com os cantos de cima arredondados (240, 400 ou 560px, até 5/6 da tela).
  3. Cabeçalho — Título (h2, 18px, negrito), descrição opcional e o "Fechar" de 44px.
  4. Corpo — Rola sozinho quando o conteúdo passa da altura.
  5. Rodapé — As ações, à direita, sobre `--muted`, fixas embaixo.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
FechadaNão existe na página.
AbrindoEntra deslizando 32px e aparecendo, em 200ms — só com movimento liberado.
AbertaA página atrás fica inerte e não rola.
Pela esquerdaposicao="esquerda" (E142): o menu de navegação no celular — o do styleguide usa esta. Com focoInicial, o foco entra no campo indicado (o filtro), e não no primeiro focável — testado na ficha.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
AbreO foco vai ao primeiro campo, pulando o "Fechar"; sem campo, ao "Fechar"; sem nada, ao painel — testado na ficha.
Tab no último elementoVolta ao primeiro: o foco não sai da gaveta — testado na ficha.
Fecha (Esc, X, fundo)O foco volta a quem abriu; onFechar recebe escape, botao ou fundo — testado na ficha.
Fundo desligadoCom fecharNoFundo={false}, o clique fora não fecha nem tira o foco — testado na ficha.

Relacionados