Sheet
StableDialog ancorado a uma borda da viewport, com header e footer fixos e um corpo que rola. Composto sobre Base UI Dialog e sobre o Button do Up Web DS. A borda é o argumento para usá-lo: ele segura trabalho secundário — filtros, detalhes, navegação — sem fingir que a página embaixo sumiu. Quando o conteúdo é uma decisão em vez de um lugar, o Dialog centralizado diz isso melhor.
Instalação
npx up-web-ds add sheetGera close para a biblioteca de ícones do projeto (components.json → iconLibrary).
Preview
Default
Sides
With Scrolling Body
Without Close Button
All states
Default
Sides
With Scrolling Body
Without Close Button
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- overlay
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / sheet
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: o foco entra no painel ao abrir, Tab dá a volta dentro dele em vez de escapar para a página coberta, Escape fecha devolvendo o foco ao gatilho, e a saída por Escape continua existindo mesmo com o botão de fechar do canto removido — um painel sem saída visível é uma escolha, um painel sem saída é uma armadilha. Leitor de tela verificado por teste: o painel é nomeado pelo SheetTitle e descrito pelo SheetDescription, e o botão do canto é nomeado por texto em vez de pelo glifo. Touch verificado em navegador com emulação de toque em viewport de 375px: o painel lateral ocupa três quartos da largura deixando visível a página atrás, os alvos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e quem rola é o SheetBody, não o painel inteiro. Reduced motion verificado com prefers-reduced-motion: reduce — a duração colapsa para 1ms e o deslocamento de entrada, expresso em --motion-distance, vai a zero em vez de apenas ficar rápido.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- close
- Construído sobre
- Button
- Usado por
- Nenhum ainda