Estrutura

Collapsible

/componentes/collapsible.mdmarkdown cru, para quem lê com agent em vez de olho

Aberto

RivoCode Tecnologia, 12.345.678/0001-99, João Pessoa PB.

Fechado

Importar

import { Collapsible } from '@rivocode/ui'

Quando usar

Esconde e mostra um bloco.

E o Accordion de um item só, sem a moldura e sem a coordenacao entre irmaos. Quando ha várias secoes que se fecham entre si, o Accordion diz mais.

<Collapsible>
  <CollapsibleTrigger>Dados de quem emite</CollapsibleTrigger>
  <CollapsiblePanel>RivoCode Tecnologia, 12.345.678/0001-99.</CollapsiblePanel>
</Collapsible>

O painel anima altura sozinho, e para de animar quando o sistema pede menos movimento.

No React Native

Traduz: o @rivocode/ui-native exporta Collapsible - label no lugar de CollapsibleTrigger e CollapsiblePanel; o mesmo movimento do Accordion. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.

API

Prop	Tipo
`defaultOpen`0.4.0 Whether the collapsible panel is initially open.	`boolean`
`disabled`0.4.0 Whether the component should ignore user interaction.	`boolean`
`onOpenChange`0.4.0 Event handler called when the panel is opened or closed.	`((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)`
`open`0.4.0 Whether the collapsible panel is currently open.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, CollapsibleRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.