Resumen
Collapsible expone los contratos Root, Trigger y Panel de Base UI. Root gestiona el estado de expansión, Trigger proporciona la activación mediante teclado y la relación con el panel, y Panel gestiona la animación y la duración del contenido.
”Uso”
defaultOpen para la expansión no controlada. Usa open y onOpenChange cuando la aplicación controla el estado. La devolución de llamada recibe el valor booleano solicitado y los detalles del evento de Base UI, incluidos reason, event y cancel(). Cancelar un cambio conserva el estado actual. Un panel controlado externamente puede omitir Trigger cuando su estado proviene de otro control o de una condición de la aplicación.
Los Trigger heredan el estado disabled de Root y pueden anularlo con su propia prop disabled. El activador nativo admite Intro y Espacio, y proporciona aria-expanded y aria-controls automáticamente. Asigna a cada activador un nombre accesible significativo.
Anatomía
Personalización nativa
Root y Panel representan undiv; Trigger representa un button. Cada parte acepta atributos nativos, controladores, className, style, refs y composición de Base UI mediante render. Las devoluciones de llamada de clase y estilo reciben el estado de la parte. Reenvía todas las props proporcionadas y la ref desde los componentes de renderizado personalizados. Establece nativeButton={false} cuando Trigger represente un elemento que no sea un botón.
Los tipos públicos incluyen CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps, los tres tipos de estado de las partes, y CollapsibleRootChangeEventDetails y CollapsibleRootChangeEventReason.
Animación y ciclo de vida del contenido
Panel usa de forma predeterminadadimension="height". Usa dimension="width" para la expansión horizontal y restringe el ancho del contenido cuando sea necesario. containAnimation tiene como valor predeterminado true, recorta el desbordamiento y distribuye el contenido en una columna. Establécelo en false cuando el contenido necesite desbordarse durante la transición.
La duration de Panel elige un ajuste preestablecido de tema (instant, fast, normal o slow) y el valor predeterminado es normal. Las preferencias de movimiento reducido desactivan las transiciones.
Panel se desmonta después de cerrarse de forma predeterminada. Usa keepMounted para conservar el estado local del contenido mientras ocultas el panel cerrado. hiddenUntilFound permite que la búsqueda de páginas del navegador revele contenido cerrado y tiene prioridad sobre 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
predeterminado:"false"
Initial uncontrolled expansion state.
boolean
predeterminado:"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
predeterminado:"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
predeterminado:"true"
Clips overflowing content during expansion and uses a column layout.
"height" | "width"
predeterminado:"height"
Dimension animated when the panel opens and closes.
"fast" | "instant" | "normal" | "slow"
predeterminado:"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
predeterminado:"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.