Hover Card
StablePrévia ancorada a um link, aberta por hover ou foco. Composto sobre Base UI PreviewCard — e o nome de lá descreve melhor o contrato: ela adianta algo que o gatilho já leva. O gatilho continua sendo um link real, então tudo que a prévia mostra também é alcançável sem ela.
Instalação
npx up-web-ds add hover-cardPreview
Default
Um tratamento decorativo não vira variant: ele vira uma recipe que compõe o primitive de ação oficial em vez de reimplementar o elemento nativo.
Side Top
With Delay
All states
Default
Um tratamento decorativo não vira variant: ele vira uma recipe que compõe o primitive de ação oficial em vez de reimplementar o elemento nativo.
Side Top
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- overlay
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / hover-card
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: não revisado
- Reduced motion: revisado
Teclado verificado por teste: a prévia abre ao receber foco por Tab — não só no hover —, Escape a dispensa sem tirar o foco do gatilho e os links internos são alcançáveis por Tab (WCAG 2.2 SC 1.4.13, nas duas metades: dispensável e apontável). A prévia sobrevive à saída do ponteiro do gatilho, senão nunca daria para viajar até ela. Leitor de tela verificado por teste: o gatilho é um link com href real e a prévia é conteúdo suplementar, não a única rota até o que ela mostra. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada mede 0.001s. Toque é declarado como falso por decisão de design: seguir o link é o caminho equivalente.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda