آکاردئون — Accordion

آکاردئون برای نمایش محتوای ثانویه یا مرحله‌بندی‌شده در پنل‌های تاشو استفاده می‌شود؛ مثل پرسش‌های متداول یا مراحل یک راهنما. منطق باز و بسته شدن، کیبورد و وضعیت از react-aria ( و ) می‌آید و ظاهر فقط با صفت‌های و توکن تعیین می‌شود. ساختار heading و دکمهٔ trigger ثابت است؛ سطح heading با با ساختار صفحه هم‌خوان می‌شود.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Accordion, AccordionItem } from '@tokapps/tuk';

نمونهٔ زنده

از منوی «ایدهٔ جدید» فرم را پر کنید.

کد قابل کپی

تک‌باز با یک گزینهٔ غیرفعال

TSX

import { Accordion, AccordionItem } from '@tokapps/tuk';export function FaqSingle() {  return (    <Accordion defaultExpandedKeys={['a']}>      <AccordionItem id="a" title="چگونه ایده ثبت کنم؟">        از منوی «ایدهٔ جدید» فرم را پر کنید.      </AccordionItem>      <AccordionItem id="b" title="هزینهٔ ثبت چقدر است؟">        ثبت ایده رایگان است.      </AccordionItem>      <AccordionItem id="c" title="غیرفعال" isDisabled>        در دسترس نیست.      </AccordionItem>    </Accordion>  );}

چندباز با سطح heading دلخواه

TSX

import { Accordion, AccordionItem } from '@tokapps/tuk';export function ProcessSteps() {  return (    <Accordion allowsMultiple print="show">      <AccordionItem id="1" title="مرحلهٔ ۱: ثبت" headingLevel={2}>        توضیح مرحلهٔ اول.      </AccordionItem>      <AccordionItem id="2" title="مرحلهٔ ۲: بررسی" headingLevel={2}>        توضیح مرحلهٔ دوم.      </AccordionItem>    </Accordion>  );}

کنترل‌شده با گزینهٔ غیرفعال

TSX

import { useState } from 'react';import { Accordion, AccordionItem } from '@tokapps/tuk';export function ControlledAccordion() {  const [open, setOpen] = useState<string[]>(['shipping']);  return (    <Accordion      allowsMultiple      expandedKeys={open}      onExpandedChange={(keys) => setOpen([...keys].map(String))}    >      <AccordionItem id="shipping" title="زمان تحویل">        ارسال ظرف ۲ تا ۵ روز کاری.      </AccordionItem>      <AccordionItem id="refund" title="بازگشت وجه" isDisabled>        این بخش در حال حاضر در دسترس نیست.      </AccordionItem>    </Accordion>  );}

همهٔ پیکربندی‌ها

نوع	پیش‌فرض	توضیح
	—	آیتم‌های .
		چند پنل هم‌زمان باز بمانند. پیش‌فرض تک‌باز است.
	—	کلیدهای باز در بار اول (حالت غیرکنترلی).
	—	کلیدهای باز (حالت کنترل‌شده).
	—	با هر تغییر باز یا بسته شدن صدا زده می‌شود.
	—	کل گروه غیرفعال می‌شود.
·		کل آکاردئون را در چاپ پنهان می‌کند.
	—	کلاس روی ریشه.

نوع	پیش‌فرض	توضیح
	— (الزامی)	شناسهٔ یکتا داخل گروه.
	— (الزامی)	عنوان قابل‌کلیک (trigger).
	—	محتوای پنل.
· · · ·		سطح heading عنوان؛ بر اساس ساختار صفحه انتخاب کنید.
	—	همین آیتم غیرفعال می‌شود.
	—	کلاس روی ریشهٔ آیتم.

تمام پراپ‌های بالا در تعریف شده‌اند. در کد، پراپ یا تعریف نشده است.

ساختار و اسلات‌ها

ترتیب DOM (با و ):

code

Accordion                       data-tds="accordion"  [data-print]└─ AccordionItem                data-tds="accordion-item"  [data-expanded]   ├─ heading (h با headingLevel)   data-part="heading"   │  └─ button (trigger)           data-part="trigger"   │     ├─ span                    data-part="title"   │     └─ Icon «expand»           data-part="chevron"   └─ DisclosurePanel               data-part="panel"      └─ div                        data-part="content"

بخش ثابت (بنیان): ترتیب بالا، heading واقعی، دکمهٔ trigger و پنل. بخش قابل‌تغییر: روی ریشه و آیتم، محتوای و ، و توکن‌های .

همهٔ حالت‌ها

حالت	نشانه	نمایش
بسته (پیش‌فرض)	روی trigger	فلش در حالت عادی؛ محتوای پنل از درخت دسترسی حذف می‌شود.
باز	روی آیتم و	فلش ۱۸۰ درجه می‌چرخد و پنل نمایان است.
hover	روی trigger	پس‌زمینه با .
focus-visible	روی trigger	حلقهٔ فوکوس داخلی با .
غیرفعال	یا روی trigger (از )	کدری با و نشانگر .
چاپ		همهٔ پنل‌ها باز و فلش‌ها پنهان.
چاپ پنهان	روی ریشه	کل آکاردئون در چاپ پنهان.

در کد حالت خطا () یا بارگذاری () تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

تعداد پنل‌های باز: تک‌باز (پیش‌فرض) یا چندباز با .
مدیریت وضعیت: غیرکنترلی با یا کنترل‌شده با و .
سطح heading: از تا .
غیرفعال‌سازی: روی کل گروه با در یا روی یک آیتم با در .
چاپ: (پیش‌فرض) یا .
نقاط توسعه: روی ریشه و آیتم؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، و ؛ محتوای متنی از طریق پراپ‌های و ؛ handler .
variant و size: در کد تعریف نشده‌اند. اندازهٔ ظاهری با توکن‌های بالا تنظیم می‌شود.

تغییرات ممنوع (بنیان ثابت)

trigger باید داخل heading واقعی باشد؛ تبدیل heading به یا حذف آن ممنوع است.
نقش‌ها و فقط از react-aria می‌آیند؛ دستکاری دستی آن‌ها ممنوع است.
حداقل ارتفاع trigger برابر است؛ کوچک‌کردن یا حذفش ممنوع است.
کیبورد: و باید پنل را باز و بسته کنند و ترتیب حفظ شود.
پنل بسته باید از درخت دسترسی حذف شود.
رنگ خام، گرادیان یا وابسته‌کردن وضعیت فقط به رنگ ممنوع است؛ جهت فلش و وضعیت را می‌رسانند.
در کاهش حرکت گذار باید ۱ms شود؛ حذف این قاعده ممنوع است.

RTL، کیبورد و صفحه‌خوان

فلش در لبهٔ انتهایی خط قرار می‌گیرد (در RTL سمت چپ)؛ متن با تراز می‌شود.
و : باز و بسته کردن پنل. : حرکت بین trigger‌ها و محتوای باز.
کلیدهای و در قرارداد دسترسی‌پذیری «در صورت پیاده‌سازی مرورگر» ثبت شده‌اند و در کد handler اضافه‌ای ندارند؛ ترتیب معیار است.
نام trigger از متن عنوان گرفته می‌شود. سطح heading را با مطابق ساختار صفحه تنظیم کنید.
صفحه‌خوان وضعیت باز یا بسته را اعلام می‌کند؛ پنل بسته از درخت دسترسی حذف می‌شود.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری آن چرخش فلش است.
حرکت: چرخش فلش () و رنگ پس‌زمینهٔ hover با نام معنایی (). در یا سوییچ کاهش حرکت، زمان گذار ۱ms می‌شود.
چاپ: پیش‌فرض ؛ رنگ تک‌رنگ، همهٔ پنل‌ها باز، فلش پنهان، روی ریشه.

توکن‌ها

معنایی: ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، .
تایپوگرافی: ، ، .
کنترل: ، ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون فلش فقط از طریق کامپوننت با نام معنایی رسم می‌شود؛ مسیر فایل آیکون در کد مستند نمی‌شود.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ ساختار DOM و ARIA ثابت می‌ماند.
Gesture ندارد؛ تعامل فقط با ماوس، لمس و کیبورد است.

نکات

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

آکاردئون — Accordion

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Accordion, AccordionItem } from '@tokapps/tuk';

نمونهٔ زنده

از منوی «ایدهٔ جدید» فرم را پر کنید.

کد قابل کپی

تک‌باز با یک گزینهٔ غیرفعال

TSX

import { Accordion, AccordionItem } from '@tokapps/tuk';export function FaqSingle() {  return (    <Accordion defaultExpandedKeys={['a']}>      <AccordionItem id="a" title="چگونه ایده ثبت کنم؟">        از منوی «ایدهٔ جدید» فرم را پر کنید.      </AccordionItem>      <AccordionItem id="b" title="هزینهٔ ثبت چقدر است؟">        ثبت ایده رایگان است.      </AccordionItem>      <AccordionItem id="c" title="غیرفعال" isDisabled>        در دسترس نیست.      </AccordionItem>    </Accordion>  );}

چندباز با سطح heading دلخواه

TSX

import { Accordion, AccordionItem } from '@tokapps/tuk';export function ProcessSteps() {  return (    <Accordion allowsMultiple print="show">      <AccordionItem id="1" title="مرحلهٔ ۱: ثبت" headingLevel={2}>        توضیح مرحلهٔ اول.      </AccordionItem>      <AccordionItem id="2" title="مرحلهٔ ۲: بررسی" headingLevel={2}>        توضیح مرحلهٔ دوم.      </AccordionItem>    </Accordion>  );}

کنترل‌شده با گزینهٔ غیرفعال

TSX

import { useState } from 'react';import { Accordion, AccordionItem } from '@tokapps/tuk';export function ControlledAccordion() {  const [open, setOpen] = useState<string[]>(['shipping']);  return (    <Accordion      allowsMultiple      expandedKeys={open}      onExpandedChange={(keys) => setOpen([...keys].map(String))}    >      <AccordionItem id="shipping" title="زمان تحویل">        ارسال ظرف ۲ تا ۵ روز کاری.      </AccordionItem>      <AccordionItem id="refund" title="بازگشت وجه" isDisabled>        این بخش در حال حاضر در دسترس نیست.      </AccordionItem>    </Accordion>  );}

همهٔ پیکربندی‌ها

نوع	پیش‌فرض	توضیح
	—	آیتم‌های .
		چند پنل هم‌زمان باز بمانند. پیش‌فرض تک‌باز است.
	—	کلیدهای باز در بار اول (حالت غیرکنترلی).
	—	کلیدهای باز (حالت کنترل‌شده).
	—	با هر تغییر باز یا بسته شدن صدا زده می‌شود.
	—	کل گروه غیرفعال می‌شود.
·		کل آکاردئون را در چاپ پنهان می‌کند.
	—	کلاس روی ریشه.

نوع	پیش‌فرض	توضیح
	— (الزامی)	شناسهٔ یکتا داخل گروه.
	— (الزامی)	عنوان قابل‌کلیک (trigger).
	—	محتوای پنل.
· · · ·		سطح heading عنوان؛ بر اساس ساختار صفحه انتخاب کنید.
	—	همین آیتم غیرفعال می‌شود.
	—	کلاس روی ریشهٔ آیتم.

تمام پراپ‌های بالا در تعریف شده‌اند. در کد، پراپ یا تعریف نشده است.

ساختار و اسلات‌ها

ترتیب DOM (با و ):

code

Accordion                       data-tds="accordion"  [data-print]└─ AccordionItem                data-tds="accordion-item"  [data-expanded]   ├─ heading (h با headingLevel)   data-part="heading"   │  └─ button (trigger)           data-part="trigger"   │     ├─ span                    data-part="title"   │     └─ Icon «expand»           data-part="chevron"   └─ DisclosurePanel               data-part="panel"      └─ div                        data-part="content"

همهٔ حالت‌ها

حالت	نشانه	نمایش
بسته (پیش‌فرض)	روی trigger	فلش در حالت عادی؛ محتوای پنل از درخت دسترسی حذف می‌شود.
باز	روی آیتم و	فلش ۱۸۰ درجه می‌چرخد و پنل نمایان است.
hover	روی trigger	پس‌زمینه با .
focus-visible	روی trigger	حلقهٔ فوکوس داخلی با .
غیرفعال	یا روی trigger (از )	کدری با و نشانگر .
چاپ		همهٔ پنل‌ها باز و فلش‌ها پنهان.
چاپ پنهان	روی ریشه	کل آکاردئون در چاپ پنهان.

در کد حالت خطا () یا بارگذاری () تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

تعداد پنل‌های باز: تک‌باز (پیش‌فرض) یا چندباز با .
مدیریت وضعیت: غیرکنترلی با یا کنترل‌شده با و .
سطح heading: از تا .
غیرفعال‌سازی: روی کل گروه با در یا روی یک آیتم با در .
چاپ: (پیش‌فرض) یا .
نقاط توسعه: روی ریشه و آیتم؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، و ؛ محتوای متنی از طریق پراپ‌های و ؛ handler .
variant و size: در کد تعریف نشده‌اند. اندازهٔ ظاهری با توکن‌های بالا تنظیم می‌شود.

تغییرات ممنوع (بنیان ثابت)

trigger باید داخل heading واقعی باشد؛ تبدیل heading به یا حذف آن ممنوع است.
نقش‌ها و فقط از react-aria می‌آیند؛ دستکاری دستی آن‌ها ممنوع است.
حداقل ارتفاع trigger برابر است؛ کوچک‌کردن یا حذفش ممنوع است.
کیبورد: و باید پنل را باز و بسته کنند و ترتیب حفظ شود.
پنل بسته باید از درخت دسترسی حذف شود.
رنگ خام، گرادیان یا وابسته‌کردن وضعیت فقط به رنگ ممنوع است؛ جهت فلش و وضعیت را می‌رسانند.
در کاهش حرکت گذار باید ۱ms شود؛ حذف این قاعده ممنوع است.

RTL، کیبورد و صفحه‌خوان

فلش در لبهٔ انتهایی خط قرار می‌گیرد (در RTL سمت چپ)؛ متن با تراز می‌شود.
و : باز و بسته کردن پنل. : حرکت بین trigger‌ها و محتوای باز.
کلیدهای و در قرارداد دسترسی‌پذیری «در صورت پیاده‌سازی مرورگر» ثبت شده‌اند و در کد handler اضافه‌ای ندارند؛ ترتیب معیار است.
نام trigger از متن عنوان گرفته می‌شود. سطح heading را با مطابق ساختار صفحه تنظیم کنید.
صفحه‌خوان وضعیت باز یا بسته را اعلام می‌کند؛ پنل بسته از درخت دسترسی حذف می‌شود.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری آن چرخش فلش است.
حرکت: چرخش فلش () و رنگ پس‌زمینهٔ hover با نام معنایی (). در یا سوییچ کاهش حرکت، زمان گذار ۱ms می‌شود.
چاپ: پیش‌فرض ؛ رنگ تک‌رنگ، همهٔ پنل‌ها باز، فلش پنهان، روی ریشه.

توکن‌ها

معنایی: ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، .
تایپوگرافی: ، ، .
کنترل: ، ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون فلش فقط از طریق کامپوننت با نام معنایی رسم می‌شود؛ مسیر فایل آیکون در کد مستند نمی‌شود.
تم فقط حرکت و توکن‌ها را تغییر می‌دهد؛ ساختار DOM و ARIA ثابت می‌ماند.
Gesture ندارد؛ تعامل فقط با ماوس، لمس و کیبورد است.

نکات

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

آکاردئون — Accordion

نمونهٔ زنده

چگونه ایده ثبت کنم؟

هزینهٔ ثبت چقدر است؟

غیرفعال

مرحلهٔ ۱: ثبت

مرحلهٔ ۲: بررسی

کد قابل کپی

تک‌باز با یک گزینهٔ غیرفعال

چندباز با سطح heading دلخواه

کنترل‌شده با گزینهٔ غیرفعال

همهٔ پیکربندی‌ها

Accordionکپی کدکپی کد

AccordionItemکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

آکاردئون — Accordion

نمونهٔ زنده

چگونه ایده ثبت کنم؟

هزینهٔ ثبت چقدر است؟

غیرفعال

مرحلهٔ ۱: ثبت

مرحلهٔ ۲: بررسی

کد قابل کپی

تک‌باز با یک گزینهٔ غیرفعال

چندباز با سطح heading دلخواه

کنترل‌شده با گزینهٔ غیرفعال

همهٔ پیکربندی‌ها

Accordionکپی کدکپی کد

AccordionItemکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات