رفتن به محتوای اصلی

تب قرصی

وضعیت​

هدفِ 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).

نمونهٔ تعاملی​

کتابخانهٔ زندهٔ تب قرصی