Vox Mente
Navegação

Componentes

Drawer

beta

Camada que sobe pela borda, pensada para o toque. Em telas grandes, o Sheet costuma ser a escolha certa.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/drawer

Playground
<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>
    Ver detalhe da sessão
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Sessão de 28 de agosto</DrawerTitle>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Drawer
  └─ DrawerTrigger
  └─ DrawerContent
    └─ DrawerHeader
      └─ DrawerTitle
      └─ DrawerDescription
    └─ DrawerFooter
      └─ DrawerClose

Exportadas, mas sem demonstração nesta página: DrawerOverlay, DrawerPortal, DrawerSwipeHandle.

Uso

Painel que responde a gesto: arrasta para fechar, some com inércia. Pensado para o dedo, não para o mouse.

Direção do swipe

`swipeDirection` decide de onde o painel entra e para onde o gesto de fechar aponta: `down` (padrão, sobe de baixo), `up`, `left` ou `right`.

Alça de arrastar

`showSwipeHandle` desenha a barrinha que sinaliza que o painel arrasta. Ative sempre que o gesto for a forma principal de fechar.

Pontos de parada

`snapPoints` transforma o arrastar em degraus em vez de um gesto tudo-ou-nada. Cada valor é uma fração da tela (`0` a `1`) ou um tamanho fixo. Bom para um painel de filtro que o professor abre parcialmente para espiar e arrasta até o topo para preencher.

Gaveta aninhada

Um `Drawer` dentro do conteúdo de outro empilha: o painel de trás encolhe e escurece enquanto o da frente ocupa a tela. Use para uma confirmação que nasce de dentro do painel — trocar a trilha de um aluno sem fechar a sessão que está sendo editada.

Modo não-modal

`modal={false}` deixa o resto da página clicável com o painel aberto — sem travar foco nem bloquear o fundo, e sem escurecer (o overlay só existe em modo modal). Use para um painel de referência que o professor consulta enquanto continua navegando a lista atrás.

Rodapé com ações

`DrawerFooter` fixa as ações no fim do painel, e `DrawerClose` fecha sem precisar de estado próprio na página.

Quando não usar

Drawer compete com Sheet, Dialog e AlertDialog. A pergunta certa é: este painel precisa arrastar?

Sheet — quando o painel só entra e sai por clique, sem gesto de arrastar nem pontos de parada. É a escolha para um painel de filtro fixo em telas maiores.

Dialog — quando a tarefa é curta e centrada, como confirmar um convite. Drawer é para conteúdo que ocupa uma borda inteira da tela.

AlertDialog — quando a ação é destrutiva e exige confirmação explícita, como excluir uma turma. Um gesto de swipe nunca deve ser a única forma de confirmar isso.

O que o DrawerContent já monta

`DrawerContent` chama `DrawerPortal`, `DrawerOverlay` (só em modo modal) e `DrawerSwipeHandle` (só com `showSwipeHandle`) por dentro. As três peças são exportadas do pacote, mas não há receita própria pra usá-las soltas: o pacote não expõe o `Viewport` nem o `Popup` do drawer, que são o resto do que `DrawerContent` precisa pra funcionar. Na prática, use `DrawerContent` — essas três são para quem for ler o código-fonte, não para recompor a mão.

DrawerPortal — leva o painel para fora da árvore da página.

DrawerOverlay — o fundo escurecido atrás do painel, presente só quando modal não é false.

DrawerSwipeHandle — a alça visual, desenhada quando showSwipeHandle está ativo.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Drawer

PropTipoPadrão
showSwipeHandlebooleanfalse

Também aceita as props de Base UI.

DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css