أكورديون
Accordionأكورديون متاح الوصول في React مبني على Radix، يفتح قسماً واحداً أو عدة أقسام، ويوفر الوضع القابل للطي، الأحجام، محاذاة الأيقونة، والنمط المسطح. جاهز للاتجاه العربي.
يجمع Accordion المحتوى في أقسام قابلة للتوسيع. استخدم type="single" لفتح قسم واحد في كل مرة، أو type="multiple" لفتح عدة أقسام معاً.
متى تستخدمه
استخدم Accordion في الأسئلة الشائعة، قوائم المتطلبات، والنماذج الطويلة التي يقرأها المستخدم قسماً قسماً. استخدم type="single" حين يبقي القسم المفتوح الواحد الصفحة قصيرة، وtype="multiple" حين يقارن المستخدم الأقسام.
إذا وجبت قراءة كل الأقسام، استخدم العناوين والمحتوى العادي بدلاً منه. لمنطقة إظهار وإخفاء واحدة، استخدم Collapsible.
أمثلة
الخصائص
الخصائص التي يعرفها Accordion. سمات العنصر الأصلي تمر كما هي.
<Accordion>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | ||
iconAlign | "trailing" | "leading" | ||
flush | boolean | ||
typeإلزامي | "single" | ||
value | string | The controlled stateful value of the accordion item whose content is expanded. | |
defaultValue | string | The value of the item whose content is expanded when the accordion is initially rendered. Use
defaultValue if you do not need to control the state of an accordion. | |
onValueChange | (value: string) => void | The callback that fires when the state of the accordion changes. | |
collapsible | boolean | false | Whether an accordion item can be collapsed after it has been opened. |
disabled | boolean | false | Whether or not an accordion is disabled from user interaction. |
orientation | "vertical" | "horizontal" | vertical | The layout in which the Accordion operates. |
dir | Direction | The language read direction. | |
asChild | boolean |
<AccordionItem>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
disabled | boolean | false | Whether or not an accordion item is disabled from user interaction. |
valueإلزامي | string | A string value for the accordion item. All items within an accordion should use a unique value. | |
asChild | boolean |
<AccordionContent>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
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، وتعمل كل لوحة كمنطقة يسميها مشغلها. تنقل مفاتيح الأسهم التركيز بين المشغلات، وينقله Home وEnd إلى المشغل الأول والأخير.
تحافظ العناوين داخل المشغلات على مخطط المستند صالحاً للاستخدام. يؤدي السهم دوراً زخرفياً فقط، وينقلب مع حالة الفتح.