البناء · جديد

القسم القابل للطي

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

المعاينة

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

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

npx shadcn@latest add @ritla/collapsible

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

import { Collapsible } from "@/components/ui/collapsible";

<Collapsible title="Fees and exchange rate" summary={<p>Total fee JOD 0.500</p>}>
  <p>Transfer fee JOD 0.500</p>
</Collapsible>

‏open وonOpenChange للتحكم، هنا يبدأ مفتوحًا بلا سطر ملخص. استعمل الأكورديون إن كانت الأقسام عدة.

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`		خاصية Title: نص صف الزر.
`summary`	`ReactNode`		يبقى ظاهرًا تحت العنوان: أهم سطر.
`children`	`ReactNode`		التفاصيل التي تُفتح تحت الملخص.
`defaultOpen`	`boolean`	`false`	خاصية Open عند البداية.
`open / onOpenChange`	`boolean`		للتحكم في الفتح.
`disabled`	`boolean`	`false`	يمنع الفتح والإغلاق.

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

المفتاح	ما يفعله
`EnterSpace`	يفتح اللوحة أو يغلقها.

صف العنوان كله هو الزر، لا الأيقونة وحدها، وله aria-expanded وaria-controls.
ارتفاع الصف 48 بكسل. الفتح والإغلاق في 200 ملّي ثانية، وفوريان مع تقليل الحركة.
البحث في الصفحة يفتح اللوحة إن وجد النص فيها.

الأرقام: المبالغ تتبع إعداد الأرقام؛ نسّقها بـ formatNumber. وسعر الصرف يُكتب بالترتيب العربي: 1 د.أ = 1.41 دولار.
الخط العربي: العنوان label-14 Semibold، والارتفاعات حدود دنيا.
النص ثنائي الاتجاه: القيم التي قد تأتي بأي لغة تأخذ dir="auto".