Пропсы корня
| Проп | Тип | По умолчанию |
|---|
open | boolean | — |
| Управляет тем, развёрнуто ли содержимое. Если задан, компонент работает как контролируемый. |
defaultOpen | boolean | false |
| Определяет, развёрнуто ли содержимое по умолчанию. |
onChangeOpen | (value: boolean) => void | — |
| Колбэк, вызываемый при изменении состояния открытия. При переключении вызывается со следующим значением boolean. |
onChangeHidden | (value: boolean) => void | — |
Необязательный колбэк, вызываемый при изменении скрытого состояния (видимости). Может отличаться от open, если используются анимации или задержки. |
children | ReactNode | ReactNode[] | — |
| Содержимое для рендера внутри сворачиваемого контейнера. Может быть одним узлом или списком React-узлов. |
contentId | string | — |
ID элемента сворачиваемого содержимого. Используется, чтобы: связать триггер и содержимое атрибутами доступности (aria-controls); открыть развёрнутую область вспомогательным технологиям; дать стабильный идентификатор для тестов и запросов к DOM. Если не задан, ID генерируется внутри. |
Дочерние части
CollapsibleTrigger: поверхность триггера с aria-expanded и aria-controls.CollapsibleContent: раскрывающаяся область содержимого, управляющая переходами высоты и скрытым состоянием.
CollapsibleContent
| Проп | Тип | По умолчанию |
|---|
ref | Ref<HTMLDivElement> | — |
| Ref, передаваемый на корневой контейнер сворачиваемого содержимого. Полезен для измерения высоты, управления анимацией или установки фокуса. |
Также принимает все атрибуты <div>.
CollapsibleTrigger
| Проп | Тип | По умолчанию |
|---|
asChild | boolean | — |
Если true, рендерит триггер как дочерний компонент через Slot (например, <a> или <div>). Это позволяет задать собственную семантику или стили, сохранив поведение сворачивания. |
ref | Ref<HTMLButtonElement> | — |
| Ref, передаваемый на нативный элемент триггера (обычно кнопку). |
Также принимает все HTML-атрибуты.
Типы
CollapsiblePropsCollapsibleTriggerPropsCollapsibleContentProps
Модель состояния
Collapsible может быть неконтролируемым через defaultOpen или контролируемым через open и onChangeOpen.onChangeHidden отслеживает, действительно ли содержимое скрыто; это может отставать от open, потому что сначала проходит переход высоты содержимого.useCollapsibleContext доступен для продвинутых обёрток и пользовательских композиций.