نشان — Badge

نشان یک برچسب کوچک است که دو کار دارد: نمایش وضعیت (تأیید شده، در انتظار، رد شده) با آیکون و متن، یا نمایش شمارنده (تعداد اعلان یا پیام). وضعیت‌های ، ، و همیشه آیکون و برچسب متنی دارند تا رنگ تنها نشانه نباشد. نشان غیرتعاملی است و برای کنش قابل‌کلیک از دکمه استفاده کنید.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Badge } from '@tokapps/tuk';

نمونهٔ زنده

تأیید شدرد شددر انتظار بررسیپیش‌نویس

موفق

برچسبویژه

۳ اعلان خوانده‌نشده۲۵۰ پیام

کد قابل کپی

پایه: وضعیت‌ها

TSX

import { Badge } from '@tokapps/tuk';export function ReviewStatuses() {  return (    <>      <Badge status="success">تأیید شد</Badge>      <Badge status="danger">رد شد</Badge>      <Badge status="warning">در انتظار بررسی</Badge>      <Badge status="info">پیش‌نویس</Badge>    </>  );}

پیشرفته: شمارنده با سقف و متن صفحه‌خوان

TSX

import { Badge } from '@tokapps/tuk';export function NotificationCount({ unread }: { unread: number }) {  return (    <Badge      status="accent"      count={unread}      max={99}      label="اعلان خوانده‌نشده"      showZero    />  );}

برابر باشد، روی صفحه «۹۹+» و برای صفحه‌خوان «۲۵۰ اعلان خوانده‌نشده» خوانده می‌شود.

حالت خطا: وضعیت danger با متن سفارشی

در کد حالت خطا یا غیرفعال جداگانه‌ای برای نشان تعریف نشده است؛ نمونهٔ زیر وضعیت خطا را با متن دلخواه نشان می‌دهد.

TSX

import { Badge } from '@tokapps/tuk';export function PaymentFailed() {  return (    <Badge status="danger" size="sm">      تراکنش ناموفق بود    </Badge>  );}

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
	· · · · ·		و برچسب ساده‌اند؛ بقیه وضعیت‌اند و آیکون و برچسب دارند.
	·		ارتفاع و فاصلهٔ داخلی از توکن‌های .
		—	متن برچسب. اگر داده نشود، برای وضعیت‌ها برچسب پیش‌فرض می‌آید: «موفق»، «خطا»، «هشدار»، «اطلاعات».
	·	—	آیکون سفارشی. آیکون را حذف می‌کند (ر.ک. نکات).
		—	حالت شمارنده. عدد با ارقام فارسی نمایش داده می‌شود و آیکون ندارد.
			سقف شمارنده؛ بیشتر از آن «۹۹+» نمایش داده می‌شود.
			نمایش شمارندهٔ صفر. بدون آن، شمارندهٔ صفر یا کمتر نمایش داده نمی‌شود.
		—	متن صفحه‌خوان برای شمارنده، مثلاً «اعلان خوانده‌نشده».
	·		نشان را در چاپ پنهان می‌کند.
		—	کلاس روی ریشه.
سایر ویژگی‌ها		—	روی ریشهٔ اعمال می‌شوند.

ساختار و اسلات‌ها

code

Badge (span)                  data-tds="badge"  data-status  data-size  data-kind="status" | "count"  data-print├─ حالت وضعیت│  ├─ span «آیکون»           data-part="icon"    (در صورت وجود)│  └─ span «برچسب»           data-part="label"└─ حالت شمارنده   ├─ bdi «عدد»              data-part="count"   aria-hidden (وقتی label داده شده)   └─ span «متن صفحه‌خوان»   data-tds="visually-hidden"  (وقتی label داده شده)

بخش ثابت: ریشهٔ ، جفت و در حالت وضعیت، و برای عدد در حالت شمارنده. بخش قابل‌تغییر: ، ، و توکن‌های .

همهٔ حالت‌ها

حالت	نشانه	نمایش
neutral		زمینهٔ و متن .
accent		زمینهٔ و متن .
success		آیکون و متن با رنگ موفقیت و زمینهٔ .
danger		آیکون و متن با رنگ خطا و زمینهٔ .
warning		آیکون و متن با رنگ هشدار و زمینهٔ .
info		آیکون و متن با رنگ اطلاعات و زمینهٔ .
sm / md	یا	ارتفاع و فاصلهٔ داخلی کوچک‌تر یا استاندارد.
شمارنده		حداقل عرض و .
شمارندهٔ صفر	بدون رندر ()	پنهان، مگر فعال باشد.
سقف شمارنده	عدد بیشتر از	نمایش «۹۹+» (با پیش‌فرض).
چاپ پنهان		نشان در چاپ پنهان.

hover و focus ندارد، چون غیرتعاملی است. در کد حالت بارگذاری () تعریف نشده است.

تغییرات مجاز برای توسعه‌دهنده

وضعیت: ، ، ، ، ، .
اندازه: یا .
حالت: وضعیت (با و ) یا شمارنده (با ).
شمارنده: ، ، .
آیکون: پیش‌فرض آیکون وضعیت، آیکون سفارشی با ، یا حذف با .
چاپ: یا .
نقاط توسعه: ؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ؛ پیام‌های برچسب پیش‌فرض وضعیت (در کد ثابت‌اند و از طریق قابل بازنویسی‌اند).
variant: مقادیر همان variantها هستند. در کد پراپ جدای تعریف نشده است.

تغییرات ممنوع (بنیان ثابت)

وضعیت‌های ، ، و باید همیشه متن داشته باشند؛ حذف متن یا آیکون به‌تنهایی باعث می‌شود رنگ تنها نشانه شود.
نشان نباید تعاملی شود ( یا روی آن) مگر با کامپوننت دکمه.
عدد شمارنده باید داخل بماند تا جهت متن اطراف نشکند.
ساختار و ثابت است.
رنگ خام یا گرادیان مجاز نیست؛ فقط توکن‌های معنایی وضعیت.

RTL، کیبورد و صفحه‌خوان

در RTL فاصله‌ها منطقی‌اند و آیکون قبل از متن نمایش داده می‌شود. عدد شمارنده با ایزوله است.
کیبورد: نشان فوکوس نمی‌گیرد و از آن رد می‌شود.
صفحه‌خوان: متن برچسب خوانده می‌شود. برای شمارنده، بدهید تا «۳ اعلان خوانده‌نشده» گفته شود؛ بدون فقط عدد خوانده می‌شود.
وضعیت با متن خوانده می‌شود، نه با رنگ.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری: متن و آیکون.
حرکت: ندارد (). در کاهش حرکت تغییری لازم نیست.
چاپ: پیش‌فرض با رنگ تک‌رنگ ()؛ آیکون و متن در چاپ سیاه‌وسفید هم وضعیت را می‌رسانند؛ .

توکن‌ها

معنایی: ، ، ، ، ، ، ، ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، .
تایپوگرافی: ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون وضعیت از طریق کامپوننت با نام معنایی وضعیت (خطا، موفق، هشدار، اطلاعات) رسم می‌شود؛ مسیر فایل آیکون مستند نمی‌شود.
تم فقط توکن‌ها را تغییر می‌دهد؛ ساختار DOM و ARIA ثابت است.
Gesture ندارد.

نکات

در نوع پراپ فقط برای و مستند شده، اما در پیاده‌سازی فعلی آیکون وضعیت را برای همهٔ وضعیت‌ها حذف می‌کند. تا رفع این اختلاف، از روی وضعیت‌های ، ، و استفاده نکنید.
برای پیام کامل یا توضیح وضعیت از هشدار استفاده کنید.
برای کنش قابل‌کلیک از دکمه استفاده کنید، نه نشان.
برای نمایش مراحل یک فرایند زمانی، از خط زمانی استفاده کنید.