> ## 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.

# Restrângibilă

> Compune un declanșator accesibil și un panou animat cu extindere controlată sau necontrolată.

## Prezentare generală

`Collapsible` expune contractele Root, Trigger și Panel ale Base UI. Root gestionează starea de extindere, Trigger oferă activare prin tastatură și relația cu panoul, iar Panel gestionează animația și durata de viață a conținutului.

**Light**

[Exemplu Collapsible (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-collapsible--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu Collapsible (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)

## Utilizare

```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>
);
```

Utilizați `defaultOpen` pentru extinderea necontrolată. Utilizați `open` și `onOpenChange` atunci când aplicația gestionează starea. Funcția de apel invers primește valoarea booleană solicitată și detaliile evenimentului Base UI, inclusiv `reason`, `event` și `cancel()`. Anularea unei modificări păstrează starea curentă. Un panou controlat extern poate omite Trigger atunci când starea sa provine de la un alt control sau dintr-o condiție a aplicației.

Trigger moștenește starea `disabled` a Root și o poate suprascrie cu propriul prop `disabled`. Declanșatorul nativ acceptă Enter și Space și furnizează automat `aria-expanded` și `aria-controls`. Oferiți fiecărui declanșator un nume accesibil semnificativ.

## Anatomie

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

## Personalizare nativă

Root și Panel redau un `div`; Trigger redă un `button`. Fiecare parte acceptă atribute native, handlere, `className`, `style`, referințe și compunerea `render` Base UI. Callbackurile pentru clasă și stil primesc starea părții. Transmiteți mai departe toate prop-urile furnizate și referința din componentele de randare personalizate. Setați `nativeButton={false}` când Trigger redă un element care nu este buton.

Tipurile publice includ `CollapsibleRootProps`, `CollapsibleTriggerProps`, `CollapsiblePanelProps`, cele trei tipuri de stare ale părților și `CollapsibleRootChangeEventDetails` și `CollapsibleRootChangeEventReason`.

## Animație și durata de viață a conținutului

Panel utilizează implicit `dimension="height"`. Utilizați `dimension="width"` pentru extinderea orizontală și constrângeți lățimea conținutului atunci când este necesar. `containAnimation` este implicit `true`, decupează conținutul care depășește limitele și aranjează conținutul într-o coloană. Setați-o la `false` atunci când conținutul trebuie să depășească limitele în timpul tranziției.

`duration` al Panelului alege o presetare de temă (`instant`, `fast`, `normal` sau `slow`) și valoarea implicită este `normal`. Preferințele pentru mișcare redusă dezactivează tranzițiile.

Panel este demontat implicit după închidere. Utilizați `keepMounted` pentru a păstra starea locală a conținutului în timp ce ascundeți panelul închis. `hiddenUntilFound` permite căutării în pagină a browserului să afișeze conținutul închis și are prioritate față de `keepMounted`.

## Proprietăți

### 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.