عنصر قابل للطي

Collapsible

منطقة إظهار وإخفاء واحدة في React مبنية على Radix، بزر مشغّل من عندك، وخيار الفتح افتراضيًا، ونمط بسهم.

يعرض Collapsible لوحة واحدة ويخفيها. استخدم زرك الخاص كمشغل، ودعم لوحة المفاتيح وARIA مدمج.

متى تستخدمه

استخدم Collapsible لإخفاء تفاصيل اختيارية خلف مشغّل: مرشّحات متقدّمة، أو «عرض المزيد» في ملخّص، أو شرح طويل تحت حقل. اجعل تسمية المشغّل واضحة فيما يكشفه.

لعدّة أقسام متراصّة، استخدم Accordion.

أمثلة

أساسي

مع سهم إشارة

مفتوح افتراضيًا

تبدأ هذه اللوحة مفتوحة، ويمكن طيّها بالضغط على الزر.

الخصائص

الخصائص التي يعرّفها Collapsible. سمات العنصر الأصلي تمرّ كما هي.

<Collapsible>

الخاصية	النوع	الافتراضي	الوصف
`defaultOpen`	`boolean`
`open`	`boolean`
`disabled`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`asChild`	`boolean`

<CollapsibleTrigger>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<CollapsibleContent>

الخاصية	النوع	الافتراضي	الوصف
`forceMount`	`true`		Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`asChild`	`boolean`

إمكانية الوصول

يعرض المشغّل aria-expanded وaria-controls، فتُعلن حالته وهدفه. يبدّله Space وEnter.

استخدم زرًّا حقيقيًا مشغّلًا. إن أضفت سهمًا فأبقِه زخرفيًا ودع التسمية تحمل المعنى.