کامپوننت‌ها

منوی کشویی

فهرستی از عمل‌ها که با یک دکمه باز می‌شود؛ با الگوی Menu Button و پیمایش کامل کیبورد.

import { DropdownMenu, MenuItem, MenuSeparator, MenuLabel } from "@kashi-ui/react";

نمونه

<DropdownMenu trigger={<Button>گزینه‌ها</Button>}>
<MenuLabel>پروژه</MenuLabel>
<MenuItem icon={<EditIcon />} shortcut="Ctrl+E" onSelect={edit}>ویرایش</MenuItem>
<MenuItem icon={<CopyIcon />} shortcut="Ctrl+D" onSelect={copy}>کپی</MenuItem>
<MenuItem icon={<ArchiveIcon />} disabled>بایگانی</MenuItem>
<MenuSeparator />
<MenuItem icon={<TrashIcon />} tone="danger" onSelect={remove}>حذف</MenuItem>
</DropdownMenu>

<DropdownMenu align="end" label="عملیات ردیف"
trigger={<Button variant="tertiary" iconOnly aria-label="عملیات بیشتر"><DotsIcon /></Button>}>
…
</DropdownMenu>

کیبورد

کلید	عمل
`Enter` / `Space` / `↓`	باز کردن و رفتن به اولین گزینه
`↑` روی دکمه	باز کردن و رفتن به آخرین گزینه
`↑` / `↓`	گزینهٔ قبل / بعد (گزینه‌های غیرفعال رد می‌شوند)
`Home` / `End`	اولین / آخرین گزینه
حرف	پرش به گزینه‌ای که با آن حرف شروع می‌شود
`Esc`	بستن و برگشت به دکمه
`Tab`	بستن و رفتن به عنصر بعدی صفحه

گزینه‌های تیک‌دار

برای تنظیماتی مثل نمایش ستون‌ها؛ منو پس از انتخاب باز می‌ماند تا چند گزینه پشت سر هم عوض شوند.

<MenuItem checked={cols.date} onSelect={() => toggle("date")}>تاریخ</MenuItem>

checked نقش گزینه را menuitemcheckbox با aria-checked می‌کند. متغیرهای CSS: --k-menu-min-width، --k-menu-radius، --k-menu-item-height، --k-menu-bg.

ویژگی‌ها

نام	نوع	پیش‌فرض	توضیح
`trigger`	`ReactElement`	—	دکمهٔ بازکننده (DropdownMenu)
`label`	`string`	`متن دکمه`	نام منو برای صفحه‌خوان
`align`	`"start" \| "end"`	`"start"`	هم‌ترازی با دکمه
`onSelect`	`() => void`	—	با انتخاب گزینه؛ منو بسته می‌شود (MenuItem)
`icon / shortcut`	`ReactNode / string`	—	آیکون و میان‌بر نمایشی
`tone`	`"default" \| "danger"`	`"default"`	رنگ قرمز برای عملیات مخرب
`href`	`string`	—	گزینهٔ لینکی
`disabled`	`boolean`	`false`	غیرفعال؛ در پیمایش رد می‌شود

دسترس‌پذیری

دکمه aria-haspopup="menu" و aria-expanded دارد؛ منو role="menu" با گزینه‌های menuitem.
فوکوس داخل منو با کلیدهای جهت‌دار جابه‌جا می‌شود، نه Tab؛ پس از انتخاب یا Esc، فوکوس به دکمه برمی‌گردد.
منو برای عمل‌ها است. برای انتخاب یک مقدار در فرم از انتخاب از فهرست استفاده کنید.