Panoramica
Collapsible espone i contratti Root, Trigger e Panel di Base UI. Root gestisce lo stato di espansione, Trigger fornisce l’attivazione da tastiera e la relazione con il pannello, e Panel gestisce l’animazione e il ciclo di vita del contenuto.
Utilizzo
defaultOpen per l’espansione non controllata. Usa open e onOpenChange quando l’applicazione gestisce lo stato. Il callback riceve il valore booleano richiesto e i dettagli dell’evento Base UI, inclusi reason, event e cancel(). L’annullamento di una modifica preserva lo stato corrente. Un pannello controllato esternamente può omettere Trigger quando il suo stato deriva da un altro controllo o da una condizione dell’applicazione.
I trigger ereditano lo stato disabled di Root e possono sovrascriverlo con la propria prop disabled. Il trigger nativo supporta Invio e Spazio e fornisce automaticamente aria-expanded e aria-controls. Assegna a ogni trigger un nome accessibile significativo.
Anatomia
Personalizzazione nativa
Root e Panel eseguono il rendering di undiv; Trigger esegue il rendering di un button. Ogni parte accetta attributi nativi, gestori, className, style, ref e la composizione render di Base UI. I callback di classe e stile ricevono lo stato della parte. Inoltra tutte le prop fornite e il ref dai componenti di rendering personalizzati. Imposta nativeButton={false} quando Trigger esegue il rendering di un elemento non button.
I tipi pubblici includono CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps, i tre tipi di stato delle parti e CollapsibleRootChangeEventDetails e CollapsibleRootChangeEventReason.
Animazione e ciclo di vita del contenuto
Panel usa per impostazione predefinitadimension="height". Usa dimension="width" per l’espansione orizzontale e limita la larghezza del contenuto quando necessario. containAnimation è impostato su true per impostazione predefinita, ritaglia l’overflow e dispone il contenuto in una colonna. Impostalo su false quando il contenuto deve fuoriuscire durante la transizione.
duration di Panel sceglie una preimpostazione del tema (instant, fast, normal o slow) e il valore predefinito è normal. Le preferenze per la riduzione del movimento disabilitano le transizioni.
Per impostazione predefinita, Panel viene smontato dopo la chiusura. Usa keepMounted per preservare lo stato locale del contenuto nascondendo il pannello chiuso. hiddenUntilFound consente alla ricerca nella pagina del browser di mostrare il contenuto chiuso e ha la precedenza su keepMounted.
Props
Collapsible.Root
string | ((state: CollapsibleRootState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
predefinito:"false"
Initial uncontrolled expansion state.
boolean
predefinito:"false"
Default disabled state inherited by the triggers in this root.
((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)
Called with the requested open state and cancelable Base UI event details.
boolean
Controlled expansion state. Use defaultOpen for uncontrolled state.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleRootState>
Replaces the root div. Forward the supplied props and ref.
CSSProperties | ((state: CollapsibleRootState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
Collapsible.Trigger
string | ((state: CollapsibleTriggerState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
Disables this trigger.
boolean
predefinito:"true"
Set to false when render replaces the native button with another element.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleTriggerState>
Replaces the linked trigger button. Forward the supplied props and ref.
CSSProperties | ((state: CollapsibleTriggerState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
Collapsible.Panel
string | ((state: CollapsiblePanelState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
predefinito:"true"
Clips overflowing content during expansion and uses a column layout.
"height" | "width"
predefinito:"height"
Dimension animated when the panel opens and closes.
"fast" | "instant" | "normal" | "slow"
predefinito:"normal"
Theme timing preset for both size and opacity. Native style can customize transition timing.
Uses hidden until-found so browser page search can reveal the contents. Overrides keepMounted.
boolean
predefinito:"false"
Keeps the closed panel mounted and hidden, preserving local content state.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsiblePanelState>
Replaces the animated panel div. Forward the supplied props and ref.
CSSProperties | ((state: CollapsiblePanelState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.