منوی پاپآور
وضعیت
هدفِ normative. وب منوهای overflow واقعی دارد (⋮ هدر) با مارکآپ ad hoc؛ پذیرش
در وضعیت پذیرش طراحی. کلاس .menu prototype-only.
هدف
اکشنهای فرعیِ لنگرشده به دکم ه (⋯، فلشهای نما، منوی تنظیمات تقویم) — بدون محتوای فرمی.
ساختار
<div class="menu" role="menu">
<button class="mi" role="menuitem">رفتن به امروز</button>
<button class="mi danger" role="menuitem">حذف تقویم</button>
</div>
ثابت-موقعیت کنار لنگر (نه popup مطلقِ جابهجا) · آیتم ≥ ۳۸px · آیکون ۱۷px اختیاری + متن.
گونهها و اندازهها
یک گونه: عرض حداقل ۱۸۰ · آیتمها یکستونه. آیتم مخرب با رنگ تعطیلات
(.danger).
حالتها
| حالت | ظاهر |
|---|---|
| default (باز) | سطح --surface + خط + سایه ۳ |
| hover (آیتم) | --surface-1 |
| focus-visible | حلقهٔ ۲px برند روی آیتم |
| active (کلیک آیتم) | منو میبندد و اکشن اجرا میشود |
| disabled (آیتم) | کمرنگ (مثلاً «حذف» برای تقویم پیشفرض) |
| loading / error / success | ندارد (نپذیرفتن) — نتیجه با توست |
رفتار
- باز: کلیک روی لنگر · بسته: کلیک بیرون،
Esc، یا انتخاب آیتم — به همین ترتیب. - همزمان فقط یک منو؛ بازشدن منوی دوم اولی را میبندد.
- ترتیب بستهشدن لایهها: تاریخیاب ← منو ← دیالوگ (الگوی دیالوگها).
کیبورد و دسترسپذیری
role="menu"/menuitem· فلشهای بالا/پایین بین آیتمها ·Home/End.- بازشدن با
Enter/ArrowDownروی لنگر؛ فوکوس به اولین آیتم میرود و پس از بستن به لنگر برمیگردد. - آیتمها ≥۳۸px؛ در لمس hit area کامل عرض منو.
رفتار واکنشگرا
در compact همان پاپآور کنار لنگر میماند (عرض صفحه اجازه میدهد)؛ در تنگی فضا سمت مقابل لنگر باز میشود. اکشنهای نادر به برگهٔ پایین تبدیل نمیشوند.
قواعد محتوا
- ✅ فعل کوتاه؛ آیتم مخرب آخر و جدا.
- ❌ منو برای انتخاب مقدار (آن چیپ/سلکت است)؛ آیتم بدون آیکون و با متن طولانی.
توکنها
--surface + خط + سایه ۳ · هاور --surface-1 · مخرب --holiday · شعاع ۱۲ ·
--ease ۱۵۰ms.
پیادهسازی پلتفرمها
- وب: منوی overflow هدر ad hoc — مرجع:
CalendarHeader.tsx. - اندروید: DropdownMenu متریال از طریق core/design.
.menuفقط درui-design/prototypes/assets/app.css(prototype-only).