Vox Mente
Navegação

Componentes

Sheet

beta

Painel que entra pela lateral sem tirar o usuário da lista. Bom para filtro e detalhe rápido.

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/sheet

Playground
<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    Filtrar alunos
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Filtrar alunos</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

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.
Sheet
  └─ SheetTrigger
  └─ SheetContent
    └─ SheetHeader
      └─ SheetTitle
      └─ SheetDescription
    └─ SheetFooter
      └─ SheetClose

Uso

Painel que entra por uma borda da tela, sem sair do contexto de onde a lista continua visível ao lado.

Lados

`side` decide de onde o painel entra: `top`, `right`, `bottom` ou `left`. `right` é o padrão e serve para a maioria dos filtros e formulários rápidos.

Rodapé com ações

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

Sem botão de fechar

`showCloseButton={false}` remove o X do canto — use quando o rodapé já resolve o fechamento e o X seria redundante.

Quando não usar

Sheet compete com Drawer, Dialog e AlertDialog. Cada um resolve uma pergunta diferente.

Drawer — quando o painel precisa responder a gesto de arrastar (swipe para fechar, pontos de parada). Sheet não arrasta: fecha por clique no X, no overlay ou em `SheetClose`.

Dialog — quando a tarefa é centrada na tela e curta, como confirmar um convite. Sheet é para conteúdo mais longo que convive com a lista ao lado.

AlertDialog — quando a ação é destrutiva e exige confirmação explícita, como excluir uma turma. Sheet nunca é o lugar para isso.

Referência da API

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

SheetContent

PropTipoPadrão
showCloseButtonbooleantrue
side"left" | "right" | "top" | "bottom""right"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

Sheet, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger 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