نوار پیشرفت — Progress

وضعیت یک عملیات قابل‌اندازه‌گیری را نشان می‌دهد؛ مثل آپلود فایل یا مراحل ثبت ایده. اگر ندهید، نوار نامعین می‌شود و نشانهٔ «در حال انجام» نمایش می‌دهد. مقدار با فارسی می‌شود و داخل قرار می‌گیرد. نقش ، ویژگی‌های ، ، و غیرتعاملی بودن ثابت‌اند.

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

TSX

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

نمونهٔ زنده

بارگذاری فایل۶۵٪

در حال پردازش…

مرحلهٔ ثبت ایده۶۰٪

تکمیل پروفایل

۴۰٪

کد قابل کپی

پایه: معین با برچسب و مقدار

TSX

import { Progress } from '@tokapps/tuk';export function ProgressBasic() {  return <Progress value={65} label="بارگذاری فایل" showValue />;}

حالت پیشرفته: مراحل با متن دسترس‌پذیر

TSX

import { Progress } from '@tokapps/tuk';export function ProgressSteps() {  return (    <Progress      value={3}      min={0}      max={5}      label="مرحلهٔ ثبت ایده"      valueText="۳ از ۵ مرحله"      showValue      size="lg"    />  );}

حالت نامعین و دایره‌ای با نام دسترسی

TSX

import { Progress } from '@tokapps/tuk';export function ProgressIndeterminate({ busy }: { busy: boolean }) {  if (!busy) return null;  return <Progress shape="circular" size="sm" aria-label="در حال پردازش" />;}

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

پراپ	نوع	پیش‌فرض	توضیح
		— (نامعین)	مقدار فعلی؛ یا یعنی نامعین
			کف مقدار
			سقف مقدار
	\|		شکل نوار
	\| \|		ضخامت نوار یا قطر حلقه
		—	برچسب مرئی؛ نام دسترسی از آن گرفته می‌شود
		—	نمایش درصد فارسی؛ در حلقه داخل مرکز، در خطی کنار برچسب
		—	متن جایگزین برای صفحه‌خوان؛ بر درصد مقدم است
		—	نام دسترسی وقتی نیست؛ اجباری در این حالت
	\|		در چاپ پنهان می‌کند
		—	کلاس اضافی روی ریشه
ویژگی‌های	—	—	بقیهٔ (به‌جز ) روی ریشه

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

ریشه: با ، ، (فقط نامعین) و .
سربرگ (فقط با یا خطی): شامل و .
ردیاب: با ویژگی‌های ARIA.
- خطی: .
- دایره‌ای: با و ، و در صورت داخل .
بنیان ثابت: ساختار، ARIA و ترتیب بالا. قابل‌تغییر: اندازه، شکل، برچسب، توکن‌ها و کلاس.

همهٔ حالت‌ها

حالت	نشانه	نمایش
معین ()	تعریف شده، و دارد	نوار یا حلقه به نسبت مقدار پر می‌شود
نامعین ()	، بدون	نوار لغزان یا حلقهٔ چرخان
کامل ()	—	در کد تعریف نشده؛ با رسیدن به همان حالت معین است
· ·		ضخامت یا قطر متفاوت
خطی · دایره‌ای		شکل نوار
چاپ
، ، ،	—	در کد تعریف نشده؛ کامپوننت غیرتعاملی است

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

شکل: یا .
اندازه: ، یا .
بازه: و (مثلاً برای مراحل تا ).
متن: ، ، و (قابل ترجمه).
چاپ: یا .
توکن سطح کامپوننت: ، ، ، ، ، ، ، ، ، ، ، ، .
نقاط توسعه: ، و ویژگی‌های .

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

تغییر نقش یا حذف ، .
نمایش در حالت نامعین.
حذف نام دسترسی ( یا ).
قابل‌فوکوس کردن نوار یا افزودن رفتار کیبورد.
تغییر فارسی‌سازی درصد یا حذف .
گرادیان یا رنگ خام؛ رنگ پر شدن باید بماند.

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

RTL: پر شدن از لبهٔ آغازین با است و در RTL از راست آغاز می‌شود. حلقه در RTL آینه‌ای است () تا جهت خوانش هم‌راستا باشد.
کیبورد: غیرتعاملی؛ به آن فوکوس نمی‌دهد.
صفحه‌خوان: نقش با ، ، (در حالت معین) و (درصد فارسی یا ). نام از یا می‌آید.
رنگ: مقدار متنی و طول نوار پیشرفت را نشان می‌دهند، نه رنگ.

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

صدا: ندارد؛ پایان عملیات را با Toast و در صورت نیاز صدای آن اعلام کنید.
حرکت: پر شدن با از . نامعین: نوار با و حلقه با . نام معنایی و است.
کاهش حرکت: در یا انیمیشن نامعین حذف می‌شود؛ نوار خطی در ابتدای مسیر ثابت می‌ماند و حلقه نمی‌چرخد.
چاپ: پیش‌فرض با ؛ نوار با خط دور در چاپ تک‌رنگ دیده می‌شود.

توکن‌ها

معنایی: ، ، ، ، .
کامپوننتی: (فهرست بالا).
مقیاس و کنترل: ، ، ، ، ، ، .
مسیر فایل توکن: .
مسیر فهرست توکن مصرفی: .

قرارداد ARCH

Progress آیکون ندارد؛ اگر آیکونی لازم شد، از و نام معنایی استفاده کنید.
تم فقط حرکت (، ) و توکن را تغییر می‌دهد؛ نقش ARIA و ساختار ثابت است.
Progress gesture ندارد.
کاهش حرکت همواره بر تنظیم تم مقدم است.

نکات

برای بارگذاری محتوایی که مقدارش معلوم نیست از Skeleton استفاده کنید.
برای حالت «در حال ارسال» داخل دکمه از Button با وضعیت بارگذاری استفاده کنید.
برای اعلام پایان عملیات از Toast استفاده کنید.