ددیگ

Accordion

فهرستی از بخش‌های تاشو که هر کدام با کلیک یا صفحه‌کلید باز و بسته می‌شوند؛ برای پرسش‌های متداول، تنظیمات پیشرفته و هر محتوای بلندی که نباید یک‌جا دیده شود.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API و Reka UISvelte ۵ با runes و Bits UIانگولار با signals و Angular CDK

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

سفارش‌های داخل تهران بین یک تا دو روز کاری و سفارش‌های شهرستان بین سه تا پنج روز کاری تحویل داده می‌شوند.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

نصب سریع با لینک سخت و دیسک مشترکپکیج‌منیجر پیش‌فرض Node.jsYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/accordion.json
npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/accordion.json
yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/accordion.json
bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/accordion.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

استفاده

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>عنوان بخش</AccordionTrigger>
    <AccordionContent>محتوای بخش.</AccordionContent>
  </AccordionItem>
</Accordion>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

ترکیب اجزا

Accordion ریشه است و با prop به نام type تعیین می‌کند تک‌بازشو باشد یا چندبازشو؛ variant، compact، hideIndicator، disableAnimation، showDivider و keepContentMounted هم اینجا برای کل مجموعه ست می‌شوند و از راه Context به هر AccordionItem می‌رسند. هر AccordionItem یک value یکتا می‌گیرد و می‌تواند هرکدام از این حالت‌ها را فقط برای خودش override کند. AccordionTrigger خودش داخل یک h3 رندر می‌شود تا ساختار عنوان درست بماند، و AccordionContent محتوا را داخل یک div داخلی می‌گذارد؛ برای همین padding را باید روی AccordionContent بدهید نه روی خود محتوا، انیمیشن ارتفاع روی عنصر بیرونی اجرا می‌شود و padding روی آن، پرش ایجاد می‌کند.

دسترس‌پذیری

  • هر عنوان یک دکمهٔ واقعی داخل هدر است؛ Space و Enter بخش را باز و بسته می‌کنند.
  • کلیدهای بالا و پایین بین عنوان‌ها حرکت می‌کنند و Home و End به اولین و آخرین بخش می‌روند؛ جهت افقی نیازی به تنظیم RTL ندارد چون ناوبری عمودی است.
  • aria-expanded و aria-controls خودکار ست می‌شوند و وقتی keepContentMounted نیست، محتوای بسته اصلاً در DOM نمی‌ماند.
  • اگر آکاردئون در صفحه‌ای است که باید در آن جستجوی مرورگر (Ctrl+F) کار کند، به‌جای آکاردئون از محتوای همیشه‌باز استفاده کنید؛ keepContentMounted فقط محتوا را در DOM نگه می‌دارد (مثلاً برای حفظ مقدار یک فرم)، نه اینکه متنِ بسته را برای Ctrl+F قابل‌جست‌وجو کند.

مرجع API

Accordion

ریشهٔ آکاردئون؛ نوع رفتار، مقدار باز و ظاهر کل مجموعه اینجا تعیین می‌شود. مقادیر variant تا keepContentMounted پیش‌فرضِ همهٔ AccordionItemها هستند و هرکدام قابل override در سطح آیتم‌اند.

ویژگینوعپیش‌فرضتوضیح
type"single" | "multiple"—الزامی. single یعنی هر بار فقط یک بخش باز است، multiple یعنی چند بخش هم‌زمان.
collapsiblebooleanfalseفقط در حالت single؛ اجازه می‌دهد بخشِ باز با کلیک دوباره بسته شود.
value / onValueChangestring | string[] / (value) => void—کنترل‌شده. در حالت multiple نوع مقدار آرایهٔ رشته است.
defaultValuestring | string[]—بخش‌های بازِ اولیه در حالت کنترل‌نشده.
variant"light" | "shadow" | "bordered" | "splitted"lightظاهر کلی مجموعه: light بدون قاب، shadow با سایه، bordered با حاشیه، splitted هر بخش یک کارت جدا.
showDividerbooleantrueخط جداکننده زیر هر بخش؛ در variant=splitted همیشه نادیده گرفته می‌شود چون هر بخش خودش کارت جداست.
compactbooleanfalseفاصله و اندازهٔ متن همهٔ بخش‌ها را کوچک‌تر می‌کند.
disabledbooleanfalseکل آکاردئون را غیرفعال می‌کند؛ AccordionItem با disabled خودش می‌تواند این را override کند.
hideIndicatorbooleanfalseفلش باز/بسته را برای همهٔ بخش‌ها مخفی می‌کند.
disableAnimationbooleanfalseانیمیشن ارتفاع باز/بسته‌شدن را حذف می‌کند؛ تغییر حالت آنی است.
keepContentMountedbooleanfalseمحتوای بسته را هم در DOM نگه می‌دارد (مثلاً برای حفظ مقدار یک فرم داخل بخش)؛ جای‌گزین جست‌وجوی مرورگر نیست.

AccordionItem

variant و showDivider همیشه از ریشه می‌آیند؛ بقیهٔ prop های زیر می‌توانند مقدار ریشه را فقط برای همین بخش override کنند.

ویژگینوعپیش‌فرضتوضیح
valuestring—الزامی و یکتا؛ شناسهٔ این بخش برای باز و بسته شدن.
disabledboolean—این بخش را از تعامل و ناوبری صفحه‌کلید خارج می‌کند. نبودش یعنی از disabled ریشه پیروی کند.
compactboolean—override فشرده‌بودن فقط برای همین بخش.
hideIndicatorboolean—override مخفی‌بودن فلش فقط برای همین بخش.
disableAnimationboolean—override بی‌انیمیشن‌بودن فقط برای همین بخش.
keepContentMountedboolean—override نگه‌داشتن محتوا در DOM فقط برای همین بخش.

AccordionTrigger

ویژگینوعپیش‌فرضتوضیح
childrenReact.ReactNode—عنوان بخش. فلش خودکار بعد از محتوا اضافه می‌شود و هنگام باز شدن ۱۸۰ درجه می‌چرخد.
classNamestring—با cn ادغام می‌شود و بر کلاس‌های پایه اولویت دارد.

AccordionContent

ویژگینوعپیش‌فرضتوضیح
classNamestring—روی div داخلی می‌نشیند، نه روی عنصر انیمیشن‌دار؛ پس padding را بی‌خطر می‌توانید عوض کنید.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.