پیشرفت (Progress)

معرفی

کامپوننت Progress برای نمایش پیشرفت یک عملیات استفاده می‌شود.

چه زمانی استفاده کنیم:

• برای نمایش درصد پیشرفت یک عملیات (آپلود، دانلود، پردازش)
• وقتی کاربر باید بداند چه مقدار از عملیات باقی مانده است
• برای نمایش مقادیر خطی 0 تا 100

چه زمانی استفاده نکنیم:

• برای نمایش درصد نرخ تعامل — از EngagementRate (display="bar") استفاده کنید
• برای بارگذاری بدون درصد مشخص — از Skeleton یا Spinner استفاده کنید

استفاده

import { Progress } from '@partodata/ui'

export default function MyComponent() {
  return <Progress value={66} variant="primary" showValue />
}

زمین بازی

با تغییر تنظیمات زیر، نوار پیشرفت را به صورت زنده مشاهده کنید.

با برچسب

<Progress value={45} label="دانلود فایل" showValue />

سایزها

<Progress value={60} size="sm" showValue label="کوچک" />
<Progress value={60} size="md" showValue label="متوسط" />
<Progress value={60} size="lg" showValue label="بزرگ" />

رنگ‌ها

<Progress value={70} variant="primary" label="Primary" showValue />
<Progress value={60} variant="secondary" label="Secondary" showValue />
<Progress value={80} variant="success" label="Success" showValue />
<Progress value={50} variant="warning" label="Warning" showValue />
<Progress value={40} variant="destructive" label="Destructive" showValue />

Props

راهنمای استفاده

دسترسی‌پذیری

• از role="progressbar" (از Radix UI) استفاده می‌شود
• aria-valuemin, aria-valuemax, aria-valuenow به صورت خودکار تنظیم می‌شوند و مقدار همیشه به بازه 0 تا max محدود می‌شود؛ بنابراین مقدار خارج از بازه هرگز نوار را به حالت نامعین (indeterminate) نمی‌برد
• اگر label بدهید، همان متن به‌صورت خودکار نام دسترس‌پذیر نوار می‌شود (aria-labelledby)؛ نیازی به تکرار آن نیست
• تنها زمانی aria-label یا aria-labelledby بدهید که برچسب دیداری ندارید یا می‌خواهید نام دیگری جایگزین شود — مقدار صریح شما بر label اولویت دارد

کامپوننت‌های مرتبط

• CircularProgress — اگر نمایش دایره‌ای مناسب‌تر است (مثلاً در فضای مربعی)، از CircularProgress استفاده کنید
• EngagementRate — اگر نیاز به نمایش نرخ تعامل با 6 سطح رنگی دارید، از EngagementRate استفاده کنید