> ## 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` والمراجع وتركيب `render` الخاص بـ Base UI. تتلقى دوال الاستدعاء الخاصة بالفئة والنمط حالة الجزء. مرّر جميع الخصائص المتوفرة والمرجع من مكوّنات العرض المخصصة. اضبط `nativeButton={false}` عندما يعرض Trigger عنصرًا ليس زرًا.

تتضمن الأنواع العامة `CollapsibleRootProps` و`CollapsibleTriggerProps` و`CollapsiblePanelProps` وأنواع حالة الأجزاء الثلاثة، بالإضافة إلى `CollapsibleRootChangeEventDetails` و`CollapsibleRootChangeEventReason`.

## الرسوم المتحركة وعمر المحتوى

تكون القيمة الافتراضية لـ Panel هي `dimension="height"`. استخدم `dimension="width"` للتوسيع الأفقي وقيّد عرض المحتوى عند الحاجة. القيمة الافتراضية لـ `containAnimation` هي `true`، وهي تقص الفائض وتنسق المحتوى في عمود. اضبطها على `false` عندما يحتاج المحتوى إلى التجاوز أثناء الانتقال.

تختار `duration` الخاصة بـ Panel إعدادًا مسبقًا للسمة (`instant` أو `fast` أو `normal` أو `slow`)، وتكون القيمة الافتراضية هي `normal`. تؤدي تفضيلات تقليل الحركة إلى تعطيل الانتقالات.

يُزال Panel من التركيب بعد الإغلاق افتراضيًا. استخدم `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.