پیشرفت (Progress)
یک بارگذاری پیشرفت، پیشرفت جریان عملیات را به صورت بصری نمایش میدهد.
نوار پیشرفت (Progress Bar)
پیشرفت در نوار پیشرفت توسط پراپ
percent کنترل میشود.دایره (Circle)
به طور جایگزین، میتوانیم پیشرفت را در دایره نمایش دهیم با تنظیم پراپ
variant به 'circle'40%
70%
رنگها (Colors)
ما میتوانیم رنگ سفارشی برای نوار پیشرفت اعمال کنیم. گزینههای رنگ موجود بر اساس
theme.colors در Tailwind هستند.اندازه (Size)
تنظیم اندازه پیشرفت از طریق پراپ
size برای نوار پیشرفت یا پراپ width برای پیشرفت دایرهای.40%
اطلاعات سفارشی (CustomInfo)
ما میتوانیم هر محتوای سفارشی را از طریق
customInfo وارد کنیم.40%
کامل شدندینامیک (Dynamic)
مثالی از پیشرفت دینامیک.
20%
API
پیشرفت (Progress)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| color | رنگ سفارشی برای پیشرفت، گزینههای رنگ موجود بر اساس theme.colors در Tailwind. | string | رنگ پیشفرض تم |
| customInfo | محتوای سفارشی | string | ReactNode | - |
| gapDegree | زاویه شکاف در پیشرفت دایرهای (فقط زمانی که variant="circle" است قابل استفاده است). | number | 0 |
| gapPosition | موقعیت شکاف در پیشرفت دایرهای (فقط زمانی که variant="circle" است قابل استفاده است). | 'top' | 'right' | 'bottom' | 'left' | 'top' |
| percent | مقدار فعلی پیشرفت | number | 0 |
| showInfo | آیا اطلاعات پیشرفت نمایش داده شود یا خیر | boolean | true |
| size | اندازه نوار پیشرفت (فقط زمانی که variant="line" است قابل استفاده است) | 'sm' | 'md' | 'md' |
| strokeLinecap | سبک خط نوار پیشرفت (فقط زمانی که variant="circle" است قابل استفاده است) | 'round' | 'square' | 'round' |
| strokeWidth | عرض پیشرفت دایرهای (فقط زمانی که variant="circle" است قابل استفاده است) | number | 6 |
| trailClass | کلاس CSS برای مسیر پیشرفت | string | - |
| variant | نوع پیشرفت | 'line' | 'circle' | 'line' |
| width | اندازه پیشرفت دایرهای (فقط زمانی که variant="circle" است قابل استفاده است) | number | string | 'line' |