Ravox KitSobreposição
Cartão flutuante
A prévia rica de um link (perfil, pedido, produto) ao passar o mouse. Abre com atraso, espera antes de fechar e continua aberto com o mouse dentro dele. Pelo teclado abre no foco e o Tab entra no cartão.
Reembolso do pedido #48213 aprovado por @marina.souza hoje às 14:32.
Ajustes
Lado
Alinhamento
Exemplos
Prévia de pedido
Última compra: #48213
Produto numa tabela
Tênis Corrida Leve 2R$ 399,00
Abrir rápido, fechar devagar
Atribuído a Marina
Instalação
O shadcn cria components/ui/cartao-flutuante.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/cartao-flutuante.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| conteudo | ReactNode | — | O que aparece no cartão. Pode ter link e botão: o Tab entra nele e sai para o próximo elemento da página. |
| children | ReactElement | — | O gatilho: um único link ou botão. No toque o cartão não abre e o link segue sendo link. |
| lado | "cima" | "baixo" | "esquerda" | "direita" | "baixo" | De que lado o cartão abre. Vira quando falta espaço. |
| alinhamento | "inicio" | "centro" | "fim" | "centro" | Alinhamento com o gatilho. |
| atrasoAbrir | number | 600 | Espera antes de abrir, em ms (evita abrir quando o mouse só está de passagem). |
| atrasoFechar | number | 250 | Espera antes de fechar, em ms: dá tempo de levar o mouse até o cartão. |
| vao | number | 8 | Distância do gatilho, em px. |
| aberto / aoMudar | boolean / (aberto) => void | — | Modo controlado. |
| className | string | — | Classes do cartão (largura padrão w-72, respiro p-4). |