سوییچ
وضعیت
هدفِ normative. وب toggleهای واقعی دارد (دید تقویم، حالت تاریک) با مارکآپ
ad hoc؛ پذیرش در وضعیت پذیرش طراحی. کلاس .switch
prototype-only.
هدف
تنظیم بیدرنگِ وضعیتهای دوتایی — بدون دکمهٔ تأیید. کاربردها: «تمامروز»، دید/پنهانکردن تقویمها، تنظیمات اعلان.
ساختار
<button class="switch" role="switch" aria-checked="true"><span class="knob"></span></button>
جابهجایی دستگیره با inset-inline-start انیمیت میشود تا در RTL درست حرکت کند.
گونهها و اندازهها
یک گونه: ۴۴×۲۶ · دستگیره ۱۸px. روشن = برند؛ خاموش = --surface-3.
حالتها
| حالت | ظاهر |
|---|---|
| default (خاموش) | ریل --surface-3 + دستگیرهٔ روشن |
| checked (روشن) | ریل برند + دستگیرهٔ روشن |
| hover | دستگیره کمی درشت |
| focus-visible | حلقهٔ ۲px برند |
| active | همان checked (اثر بیدرنگ) |
| disabled | کمرنگ؛ toggle بیاثر |
| loading | ندارد (نپذیرفتن) — اثر باید بیدرنگ باشد |
| error / success | ندارد — پیامدها در جای خود (مثلاً بنر) اعلام میشوند |
رفتار
- اثر بیدرنگ: تغییر وضعیت بدون تأیید اعمال میشود؛ اگر عملِ پسزمینه شکست بخورد، سوییچ به حالت قبل برمیگردد و خطا با بنر اعلام میشود.
- در فرم رویداد، «تمامروز» سِگمنت ساعت را خاموش میکند (رفتار انتخابگر تاریخ و ساعت).
کیبورد و دسترسپذیری
role="switch"+aria-checked+Spaceبرای toggle؛Enterهم روی button بومی کار میکند.- نام دسترسپذیر از لیبل کنار سوییچ («تمامروز»).
- عرض ۴۴px — هدف لمسی در حداقل.
رفتار واکنشگرا
در همهٔ کلاسهای پنجره یکسان؛ در تنظیماتِ compact تمامعرض با لیبلِ مقابل.
قواعد محتوا
- ✅ لیبل وضعیتِ فعلی را نمیگوید (روشن/خاموش واضح است)؛ فقط نام تنظیم.
- ❌ دو سوییچ برای یک تنظیم؛ سوییچ برای اکشن لحظهای (آن FAB/دکمه است).
توکنها
روشن: --brand · خاموش: --surface-3 · دستگیرهٔ روشن · انیمیشن
inset-inline-start با --ease ۱۵۰–۱۸۰ms.
پیادهسازی پلتفرمها
- وب: toggleهای ad hoc — مرجع: سایدبار/لیست تقویمها در
CalendarSidebar.tsx. - اندروید: کامپوننتهای متریال + core/design.
.switchفقط درui-design/prototypes/assets/app.css(prototype-only).