Primitiveoverlay

Drawer

Stable

Superfície de borda que se pega: acompanha o dedo um para um, assenta proporcional à força do gesto, empilha quando outra abre por cima e para em snap points. Composto sobre Base UI Drawer. O Sheet e o Drawer ancoram na mesma borda, e escolher entre eles não é gosto — a camada de gesto só se paga quando o toque é a via principal; fora disso o Sheet é a resposta honesta.

Instalação

npx up-web-ds add drawer

Preview

Default

With Snap Points

Directions

Non Modal

All states

Default

With Snap Points

Directions

Non Modal

Metadata

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: overlay
Status: Stable

Origem e distribuição

Fonte: shadcn registry / drawer
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/drawer.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Teclado verificado por teste: o foco entra na superfície ao abrir, Tab dá a volta dentro dela enquanto o drawer é modal, Escape fecha devolvendo o foco ao gatilho, e o controle nomeado do rodapé faz por teclado e ponteiro o que o gesto faz por toque — uma superfície cuja única saída é arrastar é uma superfície que algumas pessoas não conseguem fechar. Leitor de tela verificado por teste: o drawer é nomeado pelo DrawerTitle e descrito pelo DrawerDescription, a alça de arraste é aria-hidden por ser afordância de um gesto que o leitor de tela não executa, e o modo não modal não desenha scrim porque a página atrás continua utilizável. Touch verificado em navegador com emulação de toque em viewport de 375px: o arraste dispensa a superfície, o corpo rola com overscroll-contain para que chegar ao fim da lista não vire dispensa acidental, e os alvos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8. Reduced motion verificado com prefers-reduced-motion: reduce — o assentamento e a soltura proporcional ao gesto são múltiplos de --motion-duration-slow, então os dois colapsam para 1ms sem que o drawer deixe de abrir, fechar ou responder ao arraste.

Dependências

Pacotes: @base-ui/react
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda