Collapsible

Collapsible — составной компонент для одной раскрывающейся области с триггером и поверхностью содержимого.

Обзор

У Collapsible небольшой контракт стилизации, построенный вокруг переходов высоты содержимого. Сам корень не предоставляет большого набора переменных, поэтому большая часть темизации делается через триггер и окружающую раскладку.

Публичные CSS-переменные

VAT ID, invoice email and legal address.

Переменная	Значение	Влияет на
Тайминг перехода высоты.`CollapsibleContent`		В этом состоянии изменений не видно
Измеренная высота содержимого, используемая при переходе открытия.`CollapsibleContent`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Collapsible: владелец состояния корня без отдельного модуля стилей.
CollapsibleTrigger: стили берутся из отрендеренного элемента триггера или поверхности asChild.
CollapsibleContent: владеет переходом высоты, обрезкой переполнения и поведением скрытого состояния.

Взаимодействие состояний и вариантов

Состояния открытия и скрытия связаны, но во время переходов не совпадают.
При композиции через asChild видимый стиль триггера часто приходит из другого компонента, например Button.
Динамический размер содержимого может изменить фактическое поведение перехода, если содержимое растёт после первого рендера.

Примеры

.slowCollapsible {
  --transition-state-delay: 220ms;
}

.compactDisclosureButton {
  font-size: 14px;
}

Не переопределяйте

Не задавайте --content-height жёстко: она измеряется во время выполнения.
Не убирайте правила переполнения, если раздел по-прежнему опирается на анимацию высоты.
Не считайте, что стили триггера принадлежат Collapsible, когда используется asChild.