تب قرصی
وضعیت
هدفِ normative. وب تببندیِ واقعی دارد (بخشبندی وظایف، انتخاب نما) با مارکآپ
ad hoc؛ پذیرش در وضعیت پذیرش طراحی. کلاس .tabpill
prototype-only.
هدف
سوئیچ بین زیرمجموعههای همسطح — نمای وظایف («همه / امروز / این هفته / انجامشده») — با شمارندهٔ زنده.
ساختار
<button class="tabpill" aria-selected="true">همه <span class="cnt">۱۲</span></button>
شمارنده (cnt) داخل خود قرص؛ جدا از نشان که فقط ناوبری است.
گونهها و اندازهها
یک گونه: ارتفاع ۳۶ · شعاع کامل · متن ۱۳٫۵/۵۰۰. شمارندهٔ دورقمی گلوییتر میشود تا عرض قرص نلرزد.
حالتها
| حالت | ظاهر |
|---|---|
| default | متن --muted روی شفاف |
| hover | --surface-1 |
| focus-visible | حلقهٔ ۲px برند |
| active (انتخابشده) | ظرف برند + متن پررنگ + شمارندهٔ برجسته |
| disabled | کمرنگ (معمول نیست — تب خالی حذف میشود) |
| loading | شمارنده skeleton/«…» میگیرد، نه اسپینر جدا |
| error / success | ندارد (نپذیرفتن) |
رفتار
- انتخابِ تب محتوای همسطح را عوض میکند؛ state نما در
localStorageمیماند. - شمارنده با تغییر داده زنده بهروز میشود؛ صفر نشان داده میشود («انجامشده ۰»).
کیبورد و دسترسپذیری
role="tab"داخلrole="tablist"+aria-selected؛ فلشهای چپ/راست بین تبها حرکت میکنند (الگوی tablist بومی WAI-ARIA).- نام دسترسپذیر = متن + شمارنده («همه، ۱۲ مورد»).
- ارتفاع ۳۶؛ hit area با padding به ۴۴px.
رفتار واکنشگرا
در compact به scroll افقیِ snapدار میشوند؛ در expanded تمامعرض با underline ندارند (قرص میمانند).
قواعد محتوا
- ✅ اسم بخش، کوتاه (یک واژه تا دو واژه).
- ❌ مخفیکردن تبِ صفر؛ شمارندهٔ بدون بهروزرسانی زنده.
توکنها
ظرف برند ۱۱–۱۳٪ · --muted → متن پررنگ · شعاع کامل · --ease ۱۵۰ms.
پیادهسازی پلتفرمها
- وب: تببندی ad hoc — مرجع: تبهای بخشبندی
TasksPageو انتخاب نما درCalendarHeader.tsx. - اندروید:
component/Tabs.ktوTabRow.kt. .tabpillفقط درui-design/prototypes/assets/app.css(prototype-only).