کشو — Drawer

یک پنل مودال کناری است که برای فیلترها، تنظیمات، جزئیات یک ردیف یا منوی تبلت به کار می‌رود. لبه با مقادیر منطقی و مشخص می‌شود، بنابراین در RTL خودکار جابه‌جا می‌شود. پرده، دام فوکوس، Escape، قفل اسکرول و بازگرداندن فوکوس مانند هستند. کشو کشیدن برای بستن ندارد؛ بستن همیشه با دکمهٔ بستن مرئی یا Escape است. برای تأیید کنش از و برای محتوای مرکزی از استفاده کنید.

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

TSX

import { Drawer } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

پایه: فیلتر از لبهٔ انتهایی

TSX

import { Drawer, Button } from '@tokapps/tuk';export function IdeaFilters() {  return (    <Drawer      trigger={<Button variant="secondary">فیلترها</Button>}      title="فیلتر ایده‌ها"      description="نتایج را محدود کنید."      footer={({ close }) => <Button onClick={close}>اعمال فیلتر</Button>}    >      <p>دسته‌بندی، وضعیت و بازهٔ زمانی.</p>    </Drawer>  );}

پیشرفته: کنترل‌شده، لبهٔ آغازین، اندازهٔ بزرگ

TSX

import { useState } from 'react';import { Drawer, Button } from '@tokapps/tuk';export function CampaignMenu() {  const [open, setOpen] = useState(false);  return (    <>      <Button variant="secondary" onClick={() => setOpen(true)}>منوی کمپین</Button>      <Drawer        open={open}        onOpenChange={setOpen}        side="start"        size="lg"        title="منوی کمپین"        description="بخش‌های کمپین را انتخاب کنید."        footer={({ close }) => <Button variant="ghost" onClick={close}>بستن منو</Button>}      >        <nav>          <p>اطلاعات کلی</p>          <p>بودجه و حمایت‌ها</p>          <p>نظرها</p>        </nav>      </Drawer>    </>  );}

حالت محدود: تمام‌صفحه، بدون دکمهٔ بستن، با چاپ

TSX

import { Drawer, Button } from '@tokapps/tuk';export function ReadOnlyDetails() {  return (    <Drawer      size="full"      showClose={false}      print="show"      dismissable={false}      trigger={<Button variant="ghost">جزئیات کامل</Button>}      title="جزئیات ایده"      footer={({ close }) => <Button onClick={close}>بازگشت</Button>}    >      <p>این کشو فقط با دکمهٔ بازگشت یا Escape بسته می‌شود.</p>    </Drawer>  );}

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

پراپ‌ها را از و (در ) می‌گیرد. پیش‌فرض‌ها از پارامترهای تابع در خوانده شده‌اند.

پراپ	نوع	پیش‌فرض	توضیح
		—	محرک باز کردن؛ با وصل می‌شود.
		—	حالت کنترل‌شده.
		—	حالت کنترل‌نشدهٔ اولیه.
		—	با هر تغییر باز یا بسته صدا می‌خورد.
		بدون پیش‌فرض (الزامی)	عنوان؛ نام دسترسی کشو.
		—	توضیح زیر عنوان؛ .
		—	ناحیهٔ کنش‌ها؛ با می‌توان بست.
		—	بدنهٔ اسکرول‌پذیر که دارد.
			لبهٔ منطقی. در RTL سمت چپ و در LTR سمت راست است.
			عرض: از ، از ، از ؛ عرض کامل بدون حاشیه.
			یعنی کلیک روی پرده نمی‌بندد.
			نمایش دکمهٔ بستن مرئی.
			برچسب دسترس‌پذیر دکمهٔ بستن.
		—	مقدار روی ریشه.
		—	نام دسترسی وقتی عنوان مرئی ندارید.
		—	مقصد اختصاصی صدا (opt-in).
			رفتار چاپ.
		از	جهت صریح برای locale React Aria.
		—	کلاس اضافه روی ریشهٔ پوشش.

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

code

ModalOverlay  [data-tds="drawer"][data-overlay="modal"][data-side][data-size][data-print]└── Modal  [data-part="panel"]    └── RacDialog  [data-part="dialog"]        ├── button  [data-part="close"]        (فقط وقتی showClose)        ├── header  [data-part="header"]        │   └── div  [data-part="heading"]        │       ├── Heading  [data-part="title"]        │       └── p  [data-part="description"]        ├── div  [data-part="body"]            (فقط وقتی children)        └── footer  [data-part="footer"]       (فقط وقتی footer)

بنیان ثابت: ترتیب DOM، ، جای‌گذاری پنل در لبهٔ منطقی، و که جهت اسلاید را تعیین می‌کند.
قابل تغییر: ، متغیرهای ، و محتوای و .

همهٔ حالت‌ها

حالت	نشانه (data-attribute یا prop)	نمایش
بسته (closed)	پوشش در DOM نیست	—
در حال ورود	روی پنل	اسلات از لبهٔ با
باز (open)		پرده و کشو؛ بقیهٔ صفحه
در حال خروج	روی پنل	اسلات به سمت لبه
لبهٔ		در LTR راست، در RTL چپ؛ گوشهٔ گرد فقط در لبهٔ داخلی
لبهٔ		برعکس
		عرض کامل، بدون گوشهٔ گرد و حاشیه
hover و pressed (دکمهٔ بستن)	،	و
focus-visible	روی دکمهٔ بستن و کنترل‌های داخل پنل	حلقهٔ
		کلیک پرده نمی‌بندد
چاپ		پنل ایستا با حاشیه؛ دکمهٔ بستن پنهان
غیرفعال، خطا، بارگذاری، فقط‌خواندنی	در کد تعریف نشده	—

رفتار پوشش (از قرارداد در )

دام فوکوس: فوکوس درون کشو حبس می‌شود و با بسته شدن به محرک برمی‌گردد.
Escape: کشو را می‌بندد و صدا می‌خورد.
پس‌زمینه: کلیک روی پرده می‌بندد؛ با فقط دکمه‌ها و Escape.
قفل اسکرول: صفحهٔ زیرین قفل است؛ فقط بدنهٔ کشو اسکرول می‌خورد.
کشیدن برای بستن: ندارد.
تودرتو: پوشش‌های تودرتو با ترتیب DOM روی هم می‌نشینند.

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

لبه (): (پیش‌فرض) یا .
اندازه (): ، (پیش‌فرض)، ، .
پرده و بستن: ، ، .
چاپ (): یا .
جهت (): یا برای locale React Aria.
محتوا: ، ، ، (گره یا ).
کنترل حالت: و ، یا و .
نقاط توسعه: ، ، ، متغیرهای در سطح پوشش (فهرست در بخش توکن‌ها).

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

اضافه کردن کشیدن برای بستن (gesture). این رفتار در قرارداد تعریف نشده است؛ برای آن از استفاده کنید.
حذف دام فوکوس، Escape یا صفحهٔ زیرین.
تغییر نقش یا نقطهٔ اتصال عنوان.
تغییر لبهٔ منطقی به لبهٔ فیزیکی ( و ) در استایل. جهت باید از و بیاید.
حذف (الزامی).
استایل خام برای رنگ یا گرادیان. فقط توکن‌های معنایی.

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

RTL: در RTL به سمت چپ و به سمت راست می‌رود. جهت اسلاید از روی ریشهٔ سند خوانده می‌شود (در CSS: ). ویژگی‌های منطقی برای گوشه‌ها و حاشیه‌ها استفاده شده‌اند.
کلیدها: و فوکوس را درون کشو می‌چرخانند؛ می‌بندد.
صفحه‌خوان: با نام از عنوان ()، و توضیح از ().
هدف لمسی: دکمهٔ بستن حداقل ۴۴px است.
فوتر در موبایل: فاصلهٔ پایین فوتر با تنظیم می‌شود.

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

صدا: پیش‌فرض بی‌صداست (opt-in). باز و بسته شدن است؛ هیچ صدایی روی hover پخش نمی‌شود. معادل بصری: اسلاید کشو و انتقال فوکوس.
حرکت: نام معنایی () در . مسافت از (پیش‌فرض ۱۰۰٪) می‌آید؛ جهت اسلاید از و سند.
کاهش حرکت: با یا اسلاید حذف و کشو فوری ظاهر می‌شود.
چاپ: پیش‌فرض . با پنل ایستا با حاشیه چاپ می‌شود و دکمهٔ بستن پنهان است.

توکن‌ها

فایل توکن‌های مصرفی: . استایل‌ها در و ساختار مشترک در . مقدار مرجع در .

معنایی: ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، .
تایپوگرافی، کنترل و مقیاس: ، ، ، ، ، ، ، ، ، .

قرارداد ARCH

آیکون دکمهٔ بستن فقط با و نام معنایی است؛ مسیر asset وجود ندارد.
تم فقط حرکت () و توکن را تغییر می‌دهد؛ لبهٔ منطقی و ترتیب DOM ثابت‌اند.
gesture ندارد. معادل کیبوردی بستن Escape و دکمهٔ بستن است.

نکات

برای ناوبری دائمی کناری در دسکتاپ از Sidebar استفاده کنید؛ کشو برای ناوبری موقت است.
برای محتوای مرکزی: Dialog.
برای تغییر خودکار بین مودال و نمای موبایل: ResponsiveDialog.
برای کنش مخرب یا تأیید: AlertDialog.

کشو — Drawer

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

TSX

import { Drawer } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

پایه: فیلتر از لبهٔ انتهایی

TSX

import { Drawer, Button } from '@tokapps/tuk';export function IdeaFilters() {  return (    <Drawer      trigger={<Button variant="secondary">فیلترها</Button>}      title="فیلتر ایده‌ها"      description="نتایج را محدود کنید."      footer={({ close }) => <Button onClick={close}>اعمال فیلتر</Button>}    >      <p>دسته‌بندی، وضعیت و بازهٔ زمانی.</p>    </Drawer>  );}

پیشرفته: کنترل‌شده، لبهٔ آغازین، اندازهٔ بزرگ

TSX

import { useState } from 'react';import { Drawer, Button } from '@tokapps/tuk';export function CampaignMenu() {  const [open, setOpen] = useState(false);  return (    <>      <Button variant="secondary" onClick={() => setOpen(true)}>منوی کمپین</Button>      <Drawer        open={open}        onOpenChange={setOpen}        side="start"        size="lg"        title="منوی کمپین"        description="بخش‌های کمپین را انتخاب کنید."        footer={({ close }) => <Button variant="ghost" onClick={close}>بستن منو</Button>}      >        <nav>          <p>اطلاعات کلی</p>          <p>بودجه و حمایت‌ها</p>          <p>نظرها</p>        </nav>      </Drawer>    </>  );}

حالت محدود: تمام‌صفحه، بدون دکمهٔ بستن، با چاپ

TSX

import { Drawer, Button } from '@tokapps/tuk';export function ReadOnlyDetails() {  return (    <Drawer      size="full"      showClose={false}      print="show"      dismissable={false}      trigger={<Button variant="ghost">جزئیات کامل</Button>}      title="جزئیات ایده"      footer={({ close }) => <Button onClick={close}>بازگشت</Button>}    >      <p>این کشو فقط با دکمهٔ بازگشت یا Escape بسته می‌شود.</p>    </Drawer>  );}

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

پراپ‌ها را از و (در ) می‌گیرد. پیش‌فرض‌ها از پارامترهای تابع در خوانده شده‌اند.

پراپ	نوع	پیش‌فرض	توضیح
		—	محرک باز کردن؛ با وصل می‌شود.
		—	حالت کنترل‌شده.
		—	حالت کنترل‌نشدهٔ اولیه.
		—	با هر تغییر باز یا بسته صدا می‌خورد.
		بدون پیش‌فرض (الزامی)	عنوان؛ نام دسترسی کشو.
		—	توضیح زیر عنوان؛ .
		—	ناحیهٔ کنش‌ها؛ با می‌توان بست.
		—	بدنهٔ اسکرول‌پذیر که دارد.
			لبهٔ منطقی. در RTL سمت چپ و در LTR سمت راست است.
			عرض: از ، از ، از ؛ عرض کامل بدون حاشیه.
			یعنی کلیک روی پرده نمی‌بندد.
			نمایش دکمهٔ بستن مرئی.
			برچسب دسترس‌پذیر دکمهٔ بستن.
		—	مقدار روی ریشه.
		—	نام دسترسی وقتی عنوان مرئی ندارید.
		—	مقصد اختصاصی صدا (opt-in).
			رفتار چاپ.
		از	جهت صریح برای locale React Aria.
		—	کلاس اضافه روی ریشهٔ پوشش.

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

code

ModalOverlay  [data-tds="drawer"][data-overlay="modal"][data-side][data-size][data-print]└── Modal  [data-part="panel"]    └── RacDialog  [data-part="dialog"]        ├── button  [data-part="close"]        (فقط وقتی showClose)        ├── header  [data-part="header"]        │   └── div  [data-part="heading"]        │       ├── Heading  [data-part="title"]        │       └── p  [data-part="description"]        ├── div  [data-part="body"]            (فقط وقتی children)        └── footer  [data-part="footer"]       (فقط وقتی footer)

بنیان ثابت: ترتیب DOM، ، جای‌گذاری پنل در لبهٔ منطقی، و که جهت اسلاید را تعیین می‌کند.
قابل تغییر: ، متغیرهای ، و محتوای و .

همهٔ حالت‌ها

حالت	نشانه (data-attribute یا prop)	نمایش
بسته (closed)	پوشش در DOM نیست	—
در حال ورود	روی پنل	اسلات از لبهٔ با
باز (open)		پرده و کشو؛ بقیهٔ صفحه
در حال خروج	روی پنل	اسلات به سمت لبه
لبهٔ		در LTR راست، در RTL چپ؛ گوشهٔ گرد فقط در لبهٔ داخلی
لبهٔ		برعکس
		عرض کامل، بدون گوشهٔ گرد و حاشیه
hover و pressed (دکمهٔ بستن)	،	و
focus-visible	روی دکمهٔ بستن و کنترل‌های داخل پنل	حلقهٔ
		کلیک پرده نمی‌بندد
چاپ		پنل ایستا با حاشیه؛ دکمهٔ بستن پنهان
غیرفعال، خطا، بارگذاری، فقط‌خواندنی	در کد تعریف نشده	—

رفتار پوشش (از قرارداد در )

دام فوکوس: فوکوس درون کشو حبس می‌شود و با بسته شدن به محرک برمی‌گردد.
Escape: کشو را می‌بندد و صدا می‌خورد.
پس‌زمینه: کلیک روی پرده می‌بندد؛ با فقط دکمه‌ها و Escape.
قفل اسکرول: صفحهٔ زیرین قفل است؛ فقط بدنهٔ کشو اسکرول می‌خورد.
کشیدن برای بستن: ندارد.
تودرتو: پوشش‌های تودرتو با ترتیب DOM روی هم می‌نشینند.

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

لبه (): (پیش‌فرض) یا .
اندازه (): ، (پیش‌فرض)، ، .
پرده و بستن: ، ، .
چاپ (): یا .
جهت (): یا برای locale React Aria.
محتوا: ، ، ، (گره یا ).
کنترل حالت: و ، یا و .
نقاط توسعه: ، ، ، متغیرهای در سطح پوشش (فهرست در بخش توکن‌ها).

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

اضافه کردن کشیدن برای بستن (gesture). این رفتار در قرارداد تعریف نشده است؛ برای آن از استفاده کنید.
حذف دام فوکوس، Escape یا صفحهٔ زیرین.
تغییر نقش یا نقطهٔ اتصال عنوان.
تغییر لبهٔ منطقی به لبهٔ فیزیکی ( و ) در استایل. جهت باید از و بیاید.
حذف (الزامی).
استایل خام برای رنگ یا گرادیان. فقط توکن‌های معنایی.

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

RTL: در RTL به سمت چپ و به سمت راست می‌رود. جهت اسلاید از روی ریشهٔ سند خوانده می‌شود (در CSS: ). ویژگی‌های منطقی برای گوشه‌ها و حاشیه‌ها استفاده شده‌اند.
کلیدها: و فوکوس را درون کشو می‌چرخانند؛ می‌بندد.
صفحه‌خوان: با نام از عنوان ()، و توضیح از ().
هدف لمسی: دکمهٔ بستن حداقل ۴۴px است.
فوتر در موبایل: فاصلهٔ پایین فوتر با تنظیم می‌شود.

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

صدا: پیش‌فرض بی‌صداست (opt-in). باز و بسته شدن است؛ هیچ صدایی روی hover پخش نمی‌شود. معادل بصری: اسلاید کشو و انتقال فوکوس.
حرکت: نام معنایی () در . مسافت از (پیش‌فرض ۱۰۰٪) می‌آید؛ جهت اسلاید از و سند.
کاهش حرکت: با یا اسلاید حذف و کشو فوری ظاهر می‌شود.
چاپ: پیش‌فرض . با پنل ایستا با حاشیه چاپ می‌شود و دکمهٔ بستن پنهان است.

توکن‌ها

فایل توکن‌های مصرفی: . استایل‌ها در و ساختار مشترک در . مقدار مرجع در .

معنایی: ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، .
تایپوگرافی، کنترل و مقیاس: ، ، ، ، ، ، ، ، ، .

قرارداد ARCH

آیکون دکمهٔ بستن فقط با و نام معنایی است؛ مسیر asset وجود ندارد.
تم فقط حرکت () و توکن را تغییر می‌دهد؛ لبهٔ منطقی و ترتیب DOM ثابت‌اند.
gesture ندارد. معادل کیبوردی بستن Escape و دکمهٔ بستن است.

نکات

برای ناوبری دائمی کناری در دسکتاپ از Sidebar استفاده کنید؛ کشو برای ناوبری موقت است.
برای محتوای مرکزی: Dialog.
برای تغییر خودکار بین مودال و نمای موبایل: ResponsiveDialog.
برای کنش مخرب یا تأیید: AlertDialog.

کشو — Drawer

نمونهٔ زنده

کد قابل کپی

پایه: فیلتر از لبهٔ انتهایی

پیشرفته: کنترل‌شده، لبهٔ آغازین، اندازهٔ بزرگ

حالت محدود: تمام‌صفحه، بدون دکمهٔ بستن، با چاپ

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

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

همهٔ حالت‌ها

رفتار پوشش (از قرارداد modalBaseکپی کدکپی کد در _shared/contract.tsکپی کدکپی کد)

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

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

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

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

توکن‌ها

قرارداد ARCH

نکات

کشو — Drawer

نمونهٔ زنده

کد قابل کپی

پایه: فیلتر از لبهٔ انتهایی

پیشرفته: کنترل‌شده، لبهٔ آغازین، اندازهٔ بزرگ

حالت محدود: تمام‌صفحه، بدون دکمهٔ بستن، با چاپ

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

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

همهٔ حالت‌ها

رفتار پوشش (از قرارداد modalBaseکپی کدکپی کد در _shared/contract.tsکپی کدکپی کد)

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

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

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

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

توکن‌ها

قرارداد ARCH

نکات

رفتار پوشش (از قرارداد در )

رفتار پوشش (از قرارداد در )