Collapsible
Um componente não estilizado para mostrar e esconder conteúdo com transições suaves.
Utilização
index.tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@convertcompany/ui";
Exemplos
Em uma tabela
| Nome | Idade | Profissão |
|---|---|---|
| João | 30 | Desenvolvedor |
| Maria | 25 | Designer |
| Pedro | 28 | Gerente |
Mostrar mais |
Com múltiplas seções
Props
Esse componente extende a implementação do Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.
Collapsible
| Propriedade | Tipo |
|---|---|
| defaultOpenDefine se o Collapsible deve estar aberto por padrão. | boolean |
| openControla o estado de abertura do Collapsible. | boolean |
| onOpenChangeFunção chamada quando o estado de abertura muda. | (open: boolean) => void |
| classNameClasses CSS adicionais para estilização. | string |
| childrenConteúdo do Collapsible. | ReactNode |
| asChildRenderiza o Collapsible como um filho de outro componente. | boolean |
| ...propsPropriedades adicionais do elemento HTML. | HTMLDivElement |
CollapsibleTrigger
| Propriedade | Tipo |
|---|---|
| childrenConteúdo do gatilho (ex: título, pergunta). | ReactNode |
| classNameClasses CSS adicionais. Ícone de Chevron gira automaticamente ao expandir. | string |
| asChildRenderiza o Collapsible como um filho de outro componente. | boolean |
| ...propsPropriedades adicionais do elemento HTML. | HTMLButtonElement |
CollapsibleContent
| Propriedade | Tipo |
|---|---|
| childrenConteúdo que será exibido quando o item estiver aberto. | ReactNode |
| classNameClasses CSS adicionais. | string |
| asChildRenderiza o Collapsible como um filho de outro componente. | boolean |
| ...propsPropriedades adicionais do elemento HTML. | HTMLDivElement |