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