چیپ
وضعیت
هدفِ normative. وب چیپهای واقعی دارد (فیلترهای نما، انتخاب تقویم) با مارکآپ
ad hoc؛ پذیرش در وضعیت پذیرش طراحی. کلاس .chip
prototype-only.
هدف
فیلتر و ا نتخاب از میان گزینههای کمشمار: فیلترهای نما، انتخاب نوع رویداد، انتخاب رنگ تقویم.
ساختار
<button class="chip" aria-pressed="true">جلسهها</button>
اختیاری: نقطهٔ رنگ تقویم قبل از متن (چیپ با نقطه رنگ).
گونهها و اندازهها
یک گونه، ارتفاع ۳۲ · متن ۱۲٫۵/۵۰۰ · شعاع کامل (قرص). «گونهٔ حذفدار» ندارد — حذف فیلتر با کلیکِ دوباره.
حالتها
| حالت | ظاهر |
|---|---|
| default | --surface-1 با خط |
| hover | --surface-2 |
| focus-visible | حلقهٔ ۲px برند |
| active / انتخابشده | ظرف برند (۱۱–۱۳٪) با متن پررنگ — نه پرشدن کامل با برند (اکشن نیست) |
| disabled | کمرنگ |
| loading / error / success | ندارد (نپذیرفتن) — فیلتر آنی است |
رفتار
- انتخابشده toggle میشود؛ کلیک روی انتخابشده آن را برمیگرداند.
- در گروهِ فیلترِ تکانتخابی، انتخاب یکی بقیه را خاموش میکند (رفتار تب ندارد — تبِ واقعی تب قرصی است).
- تغییر فیلتر، محتوای نما را بیدرنگ فیلتر میکند.
کیبورد و دسترسپذیری
- دکمه با
aria-pressedبرای toggle؛ Tab بین چیپها، فلشها لازم نیست (گروه کوچک است). - نام دسترسپذیر = متن چیپ.
- ارتفاع ۳۲ — hit area با padding عمودی به ۴۴px گسترش مییابد.
رفتار واکنشگرا
ردیف افقیِ قابل scroll در compact؛ wrap در expanded. تعداد گزینهها کم میماند (≤ ۸) پس هرگز صفحهبندی نمیخواهد.
قواعد محتوا
- ✅ اسم موجودیت، نه فعل («جلسهها» نه «فیلتر جلسهها»).
- ❌ چیپ برای اکشن مخرب یا ناوبری اصلی؛ چیپِ همیشه-انتخابشده.
توکنها
--surface-1/--surface-2 · ظرف برند ۱۱–۱۳٪ · شعاع کامل · --ease ۱۵۰ms.
پیادهسازی پلتفرمها
- وب: چیپهای ad hoc — مرجع: انتخاب تقویم/رنگ در
CalendarSidebar.tsxو فیلترهایTasksPage. - اندروید: FilterChip متریال از طریق core/design.
.chipفقط درui-design/prototypes/assets/app.css(prototype-only).