عنصر قابل للطي
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 حالته.
استخدم زراً حقيقياً كمشغل. إذا أضفت سهماً، أبقه زخرفياً واترك المعنى للتسمية.