الأكورديون

مكوّن أكورديون يسمح للمستخدمين بتوسيع أقسام المحتوى وطيّها.

Loading demo: accordion-real-world

التثبيت

npx sdaia-ui@latest add accordion

الاستخدام

import { Accordion } from "@/components/ui/accordion"

1<Accordion>
2  <AccordionItem>
3    <AccordionTrigger>Title</AccordionTrigger>
4    <AccordionContent>Content</AccordionContent>
5  </AccordionItem>
6</Accordion>

الأمثلة

الافتراضي

نمط الأكورديون الافتراضي الفاتح.

Loading demo: accordion-default

كتلة

استخدم `style="كتلة"` لفصل بصري قوي بين الألواح.

Loading demo: accordion-block

كبير

استخدم `size="كبير"` للتخطيطات الفسيحة والتنقّل الأساسي.

Loading demo: accordion-large

متوسط

استخدم `size="متوسط"` للكثافة الافتراضية. هذا هو الحجم الافتراضي.

Loading demo: accordion-medium

صغير

استخدم `size="صغير"` للألواح المدمجة وأشرطة الجانب.

Loading demo: accordion-small

معطَّل

استخدم `state="معطَّل"` لمنع اللوح من التوسّع.

Loading demo: accordion-disabled

مرجع الواجهة البرمجية

AccordionProps

خصائص مكوّن Accordion.

Prop	Type	Default	Required
direction	'ltr' \| 'rtl'	'ltr'	optional
size	'sm' \| 'md' \| 'lg'	'md'	optional
variant	'light' \| 'light-compact' \| 'block'	'light'	optional
state	'default' \| 'hovered' \| 'pressed' \| 'focused' \| 'disabled'	-	optional
iconAlignment	'trailing' \| 'leading'	'trailing'	optional
label	ReactNode	'Accordion title'	optional
expanded	boolean	-	optional
defaultExpanded	boolean	false	optional
disabled	boolean	false	optional
onExpandedChange	(expanded: boolean) => void	-	optional
preserveContentSpaceWhenCollapsed	boolean	false	optional

الألوان

النشاط