پیشرفت (Progress)

معرفی

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

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

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

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

• برای نمایش درصد نرخ تعامل — از EngagementRate یا EngagementRateBar استفاده کنید
• برای بارگذاری بدون درصد مشخص — از Skeleton یا Spinner استفاده کنید

استفاده

import { Progress } from '@parto-system-design/ui'

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

زمین بازی

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

import { Progress } from '@parto-system-design/ui'

<Progress />

با برچسب

<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 به صورت خودکار تنظیم می‌شوند
• از aria-label یا aria-labelledby برای توصیف نوار پیشرفت استفاده کنید

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

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