نشان
وضعیت
هدفِ normative. وب نشانهای شمارشی واقعی ندارد در همهٔ نقاط؛ پذیرش در
وضعیت پذیرش طراحی. کلاس .badge prototype-only.
هدف
شمارندههای ناوبری: تعداد وظایف باز روی ریل، سایدب ار و نوار پایین.
ساختار
<span class="badge">۳</span>
عنصر نمایشی متصل به مقصد ناوبری؛ خودش قابل فوکوس نیست.
گونهها و اندازهها
| گونه | کاربرد |
|---|---|
| تکرقمی | «۳» — دایره |
| دورقمی | «۱۲» — گلوییتر (pill) |
| خنثی | «۴۸» — داخل تب، با --surface-2 (برند نیست) |
حداقل ۲۰px · ۱۱px/۷۰۰ · ارقام فارسی.
حالتها
| حالت | ظاهر |
|---|---|
| default | پر برند با متن روشن |
| hover | ندارد — خودش hover نمیگیرد (مقصدش میگیرد) |
| focus-visible | با آیتم والد حلقه میگیرد |
| active | با کلیکِ مقصد ناپدید میشود (شمارش صفر شد) |
| disabled | ندارد |
| loading | «…» تا رسیدن شمارش |
| error | ندارد (نپذیرفتن) |
| success | ندارد — «صفر شدن» یعنی موفقیت |
رفتار
- عدد = تعداد واقعی آیتمهای باز؛ با sync زنده بهروز میشود؛ صفر یعنی حذف نشان.
- بالای ۹۹: «۹۹+» (ارقام فارسی).
کیبورد و دسترسپذیری
- عنصر نمایشی (
aria-hiddenروی خود نشان)؛ شمارش در نامِ دسترسپذیرِ مقصد میآید: «وظایف، ۳ مورد باز». - هدف لمسی مقصدِ آن ≥۴۴px است، نه خود نشان.
رفتار واکنشگرا
جایگاه ثابت روی گوشهٔ آیتم ناوبری (نوار پایین/ریل/سایدبار)؛ در همهٔ کلاسها همان است.
قواعد محتوا
- ✅ فقط شمارش؛ فقط ناوبری.
- ❌ «جدید!»، بج تخفیف، برچسب تبلیغ؛ متن غیرعددی.
توکنها
پر برند + --on-brand · خنثی --surface-2/--fg · شعاع کامل · ۱۱px/۷۰۰.
پیادهسازی پلتفرمها
- وب: آیتمهای ناوبری ad hoc (BottomNav/NavigationRail/CalendarSidebar در
components/calendar-app/). - اندروید: BadgedBox متریال از طریق core/design.
.badgeفقط درui-design/prototypes/assets/app.css(prototype-only).