الأكورديون (Accordion)

يجمع الأكورديون عناوين متتالية، يُظهر كل منها جزءًا من المحتوى أو يخفيه. استخدمه للأسئلة الشائعة ومجموعات الإعدادات، ولأي محتوى يتصفّحه القارئ قبل أن يقرأه كاملًا.

التثبيت

bash

npx @smicolon/fasla-ui@latest add accordion

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

بُني الأكورديون على مكتبة Base UI، لذا يحتاج إلى الحزمة @base-ui/react. يثبّتها الأمر add مع المكوّن، وكذلك تفعل أداة shadcn.

معاينة

اختر سؤالًا، أو انتقل إليه بمفتاح Tab ثم اضغط Enter أو مفتاح المسافة.

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

الأنماط (variant)

أربعة أنماط تختار بينها بالخاصية variant على المكوّن Accordion، فتتطابق عناصر المجموعة كلها. يفصل النمط default بين العناصر بخط، ويناسب صفحات الأسئلة الشائعة. ويضع النمط split كل عنصر في بطاقة مستقلة لها ظل، بينما يحيط النمط outline كل عنصر بإطار. يترك النمطان مسافة 8px بين العناصر، فيناسبان الأكورديون المجاور لبطاقات أخرى. أما النمط table فيرسم إطارًا واحدًا حول المجموعة كلها، ويناسب التفاصيل المنظّمة.

default

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

split

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

outline

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

table

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

رمز التوسيع

تحدد الخاصية indicator العلامة التي تظهر في نهاية كل عنوان. القيمة الافتراضية chevron سهم يشير إلى الأسفل، ويتجه إلى الأعلى ما دام العنصر مفتوحًا. أما القيمة plus فعلامة زائد تصبح علامة ناقص عند الفتح، فيتضح الإجراء أكثر. تقع العلامة في نهاية السطر، لذا تنتقل وحدها إلى الجهة الأخرى في الصفحات التي تُقرأ من اليمين.

chevron

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

plus

يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.

الصور الرمزية والأيقونات والمستويات المتداخلة

ضع صورة رمزية أو أيقونة بحجم 16px قبل العنوان داخل AccordionTrigger، فيترك الصف بينهما مسافة 12px. يظهر الخط تحت العنوان وحده عند التمرير. أخفِ الصورة أو الأيقونة عن قارئات الشاشة بالسمة aria-hidden، لأن العنوان يسمّي الصف. ولمحاذاة المحتوى تحت العنوان، أزِحه بفئة مثل ps-11 على AccordionContent. ولإضافة مستوى ثانٍ، ضع أكورديونًا آخر داخل AccordionContent، واحتفظ بذلك للمحتوى الذي يتفرّع فعلًا إلى أقسام رئيسية وأخرى فرعية.

تتولى الفواتير والمدفوعات، وترد خلال يوم عمل واحد.

غيّر اسمك وبريدك الإلكتروني واللغة التي يظهر بها المتجر.

كل ما يخص تسجيل دخولك والبيانات التي نحفظها عنك.

اسمك وصورتك وعنوان التوصيل.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"default" \| "split" \| "outline" \| "table"`	`"default"`	مظهر عناصر المجموعة كلها.
`indicator`	`"chevron" \| "plus"`	`"chevron"`	العلامة في نهاية كل عنوان.
`multiple`	`boolean`	`false`	يسمح بأن يبقى أكثر من عنصر مفتوحًا في الوقت نفسه.
`defaultValue`	`string[]`	لا يوجد	العناصر المفتوحة عند العرض الأول، بقيمة `value` لكل منها.
`value`	`string[]`	لا يوجد	العناصر المفتوحة، حين تتحكم فيها بنفسك.
`onValueChange`	`(value, eventDetails) => void`	لا يوجد	تُستدعى بالعناصر المفتوحة كلما فُتح عنصر أو أُغلق.
`hiddenUntilFound`	`boolean`	`false`	يتيح للبحث في الصفحة أن يجد النص داخل العناصر المغلقة ويفتح العنصر الذي وجده.
`AccordionItem`	`{ value }`	لا يوجد	عنصر واحد. قيمته `value` هي ما تذكره الخاصية `value` والخاصية `defaultValue`.
`AccordionTrigger`	`ReactNode`	لا يوجد	العنوان، وقبله صورة رمزية أو أيقونة إن شئت. يُضاف رمز التوسيع تلقائيًا.
`AccordionContent`	`ReactNode`	لا يوجد	الجزء الذي يُفتح تحت العنوان.
`className`	`string`	لا يوجد	فئات إضافية. على `AccordionContent` تُطبَّق على الصندوق الداخلي الذي يحمل الحشو.

الاستخدام

أكورديون بسيط

tsx

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

export function DeliveryQuestions() {
  return (
    <Accordion defaultValue={["0"]}>
    <AccordionItem value="0">
      <AccordionTrigger>كم يستغرق التوصيل؟</AccordionTrigger>
      <AccordionContent>يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="1">
      <AccordionTrigger>هل يمكنني تعديل طلبي بعد الدفع؟</AccordionTrigger>
      <AccordionContent>نعم، خلال ساعة من الدفع. افتح الطلب من حسابك واختر تعديل الطلب.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionTrigger>ما سياسة الإرجاع؟</AccordionTrigger>
      <AccordionContent>أعِد أي منتج لم تستخدمه خلال 30 يومًا، ونرد إليك المبلغ كاملًا.</AccordionContent>
    </AccordionItem>
    </Accordion>
  )
}

نمط آخر ورمز توسيع آخر

tsx

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

export function DeliveryQuestionsTable() {
  return (
    <Accordion variant="table" indicator="plus">
    <AccordionItem value="0">
      <AccordionTrigger>كم يستغرق التوصيل؟</AccordionTrigger>
      <AccordionContent>يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="1">
      <AccordionTrigger>هل يمكنني تعديل طلبي بعد الدفع؟</AccordionTrigger>
      <AccordionContent>نعم، خلال ساعة من الدفع. افتح الطلب من حسابك واختر تعديل الطلب.</AccordionContent>
    </AccordionItem>
    </Accordion>
  )
}

عدة عناصر مفتوحة معًا

tsx

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

export function DeliveryQuestionsOpen() {
  return (
    <Accordion multiple defaultValue={["0", "1"]}>
    <AccordionItem value="0">
      <AccordionTrigger>كم يستغرق التوصيل؟</AccordionTrigger>
      <AccordionContent>يصل طلبك خلال 2 إلى 4 أيام عمل، وتصلك رسالة فيها رابط التتبّع فور خروج الشحنة من مستودعنا.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="1">
      <AccordionTrigger>هل يمكنني تعديل طلبي بعد الدفع؟</AccordionTrigger>
      <AccordionContent>نعم، خلال ساعة من الدفع. افتح الطلب من حسابك واختر تعديل الطلب.</AccordionContent>
    </AccordionItem>
    </Accordion>
  )
}