Accordion

نصب

pnpm dlx @simurgh-ui/cli add accordion

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@simurgh-ui/react/accordion';
import '@simurgh-ui/styles/accordion.css';

Vue همین partها را از @simurgh-ui/vue/accordion صادر می‌کند. Angular از AccordionComponent و AccordionItemComponent در @simurgh-ui/angular/accordion استفاده می‌کند.

پیش‌نمایش واقعی

Live component Accordion ◆

What is Simurgh UI?

Accessible source components for Angular, React, and Vue.

Can I customize it?

استفاده

<Accordion type="single">
  <AccordionItem value="shipping">
    <AccordionTrigger>ارسال سفارش</AccordionTrigger>
    <AccordionContent>سفارش طی دو روز ارسال می‌شود.</AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion>
  <AccordionItem value="shipping">
    <AccordionTrigger>ارسال سفارش</AccordionTrigger>
    <AccordionContent>سفارش طی دو روز ارسال می‌شود.</AccordionContent>
  </AccordionItem>
</Accordion>

<simurgh-accordion>
  <simurgh-accordion-item value="shipping">
    <span trigger>ارسال سفارش</span>
    <p>سفارش طی دو روز ارسال می‌شود.</p>
  </simurgh-accordion-item>
</simurgh-accordion>

state و صفحه‌کلید

در حالت single یک item و در حالت multiple چند item می‌توانند باز باشند. برای collection پویا value پایدار و مستقل از index انتخاب کنید. Tab از triggerهای بومی عبور می‌کند و Enter یا Space item دارای focus را تغییر می‌دهد.

دسترس‌پذیری

Trigger باید پرسش یا عنوان ناحیه را روشن بیان کند و content متناظر زیر همان item باقی بماند. heading level اطراف Accordion را منظم نگه دارید و اطلاعات ضروری را به‌طور پیش‌فرض پنهان نکنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.