> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Сворачиваемый

> Создавайте доступный триггер и анимированную панель с управляемым или неуправляемым раскрытием.

## Обзор

`Collapsible` предоставляет контракты Root, Trigger и Panel из Base UI. Root управляет состоянием раскрытия, Trigger обеспечивает активацию с клавиатуры и связь с панелью, а Panel отвечает за анимацию и время существования содержимого.

**Light**

[Пример сворачиваемого блока (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-collapsible--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример сворачиваемого блока (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-collapsible--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-collapsible--display)

## Использование

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Collapsible } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportDetails = () => (
  <Collapsible.Root defaultOpen style={{ width: 360, maxWidth: '100%' }}>
    <Collapsible.Trigger render={<Button />}>
      Import details
    </Collapsible.Trigger>
    <Collapsible.Panel>
      <Text
        style={{
          paddingTop: 12,
          color: 'var(--t-font-color-secondary)',
          lineHeight: 1.5,
        }}
      >
        Match each CSV column to a record field before importing.
      </Text>
    </Collapsible.Panel>
  </Collapsible.Root>
);
```

Используйте `defaultOpen` для неконтролируемого раскрытия. Используйте `open` и `onOpenChange`, когда приложение управляет состоянием. Колбэк получает запрошенное логическое значение и сведения о событии Base UI, включая `reason`, `event` и `cancel()`. Отмена изменения сохраняет текущее состояние. Внешне управляемая панель может не включать Trigger, если ее состояние задается другим элементом управления или условием приложения.

Триггеры наследуют состояние `disabled` от Root и могут переопределить его с помощью собственного свойства `disabled`. Нативный триггер поддерживает Enter и Space и автоматически предоставляет `aria-expanded` и `aria-controls`. Дайте каждому триггеру осмысленное доступное имя.

## Структура

```text theme={null}
Collapsible.Root
├── Collapsible.Trigger
└── Collapsible.Panel
    └── Content
```

## Нативная настройка

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

**Root.className** `string | ((state: CollapsibleRootState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Root.defaultOpen** `boolean` (default: false)

Initial uncontrolled expansion state.

**Root.disabled** `boolean` (default: false)

Default disabled state inherited by the triggers in this root.

**Root.onOpenChange** `((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) =\> void)`

Called with the requested open state and cancelable Base UI event details.

**Root.open** `boolean`

Controlled expansion state. Use defaultOpen for uncontrolled state.

**Root.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CollapsibleRootState\>`

Replaces the root div. Forward the supplied props and ref.

**Root.style** `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

**Trigger.className** `string | ((state: CollapsibleTriggerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Trigger.disabled** `boolean`

Disables this trigger.

**Trigger.nativeButton** `boolean` (default: true)

Set to false when render replaces the native button with another element.

**Trigger.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CollapsibleTriggerState\>`

Replaces the linked trigger button. Forward the supplied props and ref.

**Trigger.style** `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

**Panel.className** `string | ((state: CollapsiblePanelState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Panel.containAnimation** `boolean` (default: true)

Clips overflowing content during expansion and uses a column layout.

**Panel.dimension** `"height" | "width"` (default: height)

Dimension animated when the panel opens and closes.

**Panel.duration** `"fast" | "instant" | "normal" | "slow"` (default: normal)

Theme timing preset for both size and opacity. Native style can customize transition timing.

**Panel.hiddenUntilFound** `boolean` (default: false)

Uses hidden until-found so browser page search can reveal the contents. Overrides keepMounted.

**Panel.keepMounted** `boolean` (default: false)

Keeps the closed panel mounted and hidden, preserving local content state.

**Panel.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CollapsiblePanelState\>`

Replaces the animated panel div. Forward the supplied props and ref.

**Panel.style** `CSSProperties | ((state: CollapsiblePanelState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.