البناء · جديد

الأكورديون

أسئلة تُفتح لتظهر إجاباتها، فتبقى صفحات المساعدة والإعدادات الطويلة قصيرة. يفتح الناس ما يحتاجونه فقط.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/accordion

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { Accordion, AccordionItem } from "@/components/ui/accordion";

<Accordion divider>
  <AccordionItem value="refund" question="How long does a refund take?">
    Most refunds reach your account within five working days.
  </AccordionItem>
</Accordion>

أمثلة

قسم واحد في كل مرة

‏multiple={false}: فتح قسم يغلق الآخر. يناسب الإعدادات، أما الأسئلة الشائعة فاتركها تُفتح معًا لأن الناس يقارنون الإجابات.

الجوال والأيقونة في البداية

‏breakpoint="mobile" يصغّر الأسئلة إلى body-16 والمسافة إلى 8 بكسل، وiconPosition="start" يضع الأيقونة قبل السؤال. الإعدادان على القائمة كلها فلا يختلف عنصر عن آخر. الافتراضي auto: جوال تحت md وسطح مكتب فوقه.

الفتح من رابط

ابدأ والعناصر مغلقة، وافتح العنصر الذي يشير إليه الرابط بالتحكم في value. والبحث في الصفحة يفتح الإجابة المغلقة التي فيها النص: ابحث عن IBAN.

مرجع الخصائص

Accordion

الخاصية	النوع	الافتراضي	الوصف
`multiple`	`boolean`	`true`	فتح عدة عناصر معًا؛ `false` لعنصر واحد.
`defaultValue`	`string[]`		العناصر المفتوحة في البداية.
`value / onValueChange`	`string[]`		للتحكم في العناصر المفتوحة.
`breakpoint`	`"auto" \| "desktop" \| "mobile"`	`"auto"`	خاصية Breakpoint للقائمة كلها.
`iconPosition`	`"end" \| "start"`	`"end"`	خاصية Icon position للقائمة كلها.
`divider`	`boolean`	`false`	خاصية Divider: خط فوق كل عنصر.

AccordionItem

الخاصية	النوع	الافتراضي	الوصف
`question`	`ReactNode`		خاصية Question: زر داخل عنوان.
`children`	`ReactNode`		خاصية Answer: فقرة قصيرة أو قائمة أو رابط.
`value`	`string`		معرّف العنصر في `value`.
`id`	`string`		لروابط `#` إلى العنصر.
`icon`	`boolean`	`true`	خاصية Icon: أيقونة الزائد والناقص.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	مستوى العنوان حول السؤال.
`disabled`	`boolean`	`false`	يمنع الفتح والإغلاق.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	من سؤال إلى آخر، ثم إلى روابط الإجابة المفتوحة.
`EnterSpace`	يفتح السؤال أو يغلقه، ويبقى التركيز عليه.

ARIA

كل سؤال زر داخل عنوان (h3 افتراضيًا)، فيتنقل قارئ الشاشة بين الأسئلة ويسمع هل كل منها مفتوح.
للزر aria-expanded وaria-controls يشير إلى منطقة الإجابة. أيقونة الزائد والناقص زخرفية.
صف السؤال كله هو الزر، ومساحة اللمس 48 بكسل على الأقل.
الفتح والإغلاق في 200 ملّي ثانية، وفوريان مع تقليل الحركة.

ملاحظات العربية والاتجاه

ينعكس

السؤال والإجابة يبدآن من اليمين، والأيقونة في نهاية السطر، أي على اليسار.
iconPosition="start" يضع الأيقونة على اليمين في العربية.

لا ينعكس

أيقونتا الزائد والناقص متناظرتان، فلا شيء فيهما ينعكس.

الأرقام: المبالغ والأوقات في الإجابات تُقرأ من اليسار إلى اليمين؛ نسّق الأرقام بـ formatNumber.
الخط العربي: السؤال body-18 Medium (والجوال body-16) والإجابة body-16. الأسطر العربية أعلى، فيطول الصف ولا يُقص.
النص ثنائي الاتجاه: اكتب الأسئلة العربية كما يسأل الناس بالعربية، لا ترجمة حرفية للإنجليزية.

كل المكونات ›