Обзор
Collapsible предоставляет контракты Root, Trigger и Panel из Base UI. Root управляет состоянием раскрытия, Trigger обеспечивает активацию с клавиатуры и связь с панелью, а Panel отвечает за анимацию и время существования содержимого.
Использование
defaultOpen для неконтролируемого раскрытия. Используйте open и onOpenChange, когда приложение управляет состоянием. Колбэк получает запрошенное логическое значение и сведения о событии Base UI, включая reason, event и cancel(). Отмена изменения сохраняет текущее состояние. Внешне управляемая панель может не включать Trigger, если ее состояние задается другим элементом управления или условием приложения.
Триггеры наследуют состояние disabled от Root и могут переопределить его с помощью собственного свойства disabled. Нативный триггер поддерживает Enter и Space и автоматически предоставляет aria-expanded и aria-controls. Дайте каждому триггеру осмысленное доступное имя.
Структура
Нативная настройка
Root и Panel отображаютdiv; Trigger отображает button. Каждая часть принимает нативные атрибуты, обработчики, className, style, refs и композицию Base UI render. Колбэки класса и стиля получают состояние части. Передавайте все предоставленные свойства и ref из пользовательских компонентов рендеринга. Установите nativeButton={false}, когда Trigger отображает элемент, не являющийся кнопкой.
Публичные типы включают CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps, три типа состояния частей, а также CollapsibleRootChangeEventDetails и CollapsibleRootChangeEventReason.
Анимация и время жизни содержимого
Panel по умолчанию используетdimension="height". Используйте dimension="width" для горизонтального разворачивания и при необходимости ограничивайте ширину содержимого. Значение containAnimation по умолчанию — true: оно обрезает переполнение и размещает содержимое в столбец. Установите значение false, когда содержимое должно выходить за границы во время перехода.
Свойство duration компонента Panel выбирает предустановку темы (instant, fast, normal или slow); по умолчанию используется normal. Настройки уменьшения движения отключают переходы.
По умолчанию панель удаляется из DOM после закрытия. Используйте keepMounted, чтобы сохранить локальное состояние содержимого при скрытии закрытой панели. hiddenUntilFound позволяет поиску по странице в браузере отображать закрытое содержимое и имеет приоритет над keepMounted.
Свойства
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
по умолчанию:"false"
Initial uncontrolled expansion state.
boolean
по умолчанию:"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
по умолчанию:"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
по умолчанию:"true"
Clips overflowing content during expansion and uses a column layout.
"height" | "width"
по умолчанию:"height"
Dimension animated when the panel opens and closes.
"fast" | "instant" | "normal" | "slow"
по умолчанию:"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
по умолчанию:"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.