Ravox KitSuperfícies
Retrátil
Um gatilho que mostra e esconde um trecho: filtros avançados, detalhes de um pedido, a lista inteira de arquivos. A altura anima sem medir nada em JS e, fechado, o conteúdo sai do Tab e dos leitores de tela.
design-aurora.zip
5 arquivos · 184 KB
- Landing.tsx
- tokens.css
- content.ts
- meta.json
- DESIGN.md
Ajustes
Exemplos
Controlado, com Botão no gatilho
Filtros avançados fechados
Detalhes embaixo do resumo
Pedido #4821
R$ 297,00
- Plano
- Acesso anual
- Pagamento
- Pix · 28/09 14:02
- Nota fiscal
- Emitida
Aberto no começo
design-aurora.zip
5 arquivos · 184 KB
- Landing.tsx
- tokens.css
- content.ts
- meta.json
- DESIGN.md
Instalação
O shadcn cria components/ui/retratil.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/retratil.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| aberto / aoMudar | boolean / (aberto: boolean) => void | — | Modo controlado (Retratil). |
| padrao | boolean | false | Aberto no começo, modo não controlado (Retratil). |
| desabilitado | boolean | false | Trava o gatilho (Retratil). |
| asChild | boolean | false | Passa o comportamento para o filho, como um <Botao>, em vez de criar um <button> (RetratilGatilho). |
| classeInterna | string | — | Classes da caixa de dentro; className vai na de fora, a que anima (RetratilConteudo). |
| RetratilSeta | ComponentProps<"svg"> | — | Setinha que gira quando abre. Ponha dentro do gatilho. |
| useRetratil() | { aberto, alternar, desabilitado } | — | Para montar peças próprias que reagem ao aberto/fechado. |