مراحل (Steps)

کامپوننت مراحل پیشرفت و وظایف را از طریق ترتیب تسلسل نمایش می‌دهد.

اساسی (Basic)

استفاده پیش‌فرض از کامپوننت مراحل (Steps).

عنوان (Title)

مثال مراحل با عنوان.

عمودی (Vertical)

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

توضیحات (Description)

مراحل می‌توانند توضیحات داشته باشند، اما این ویژگی تنها برای چیدمان عمودی قابل استفاده است.

آیکون سفارشی (Custom Icon)

برچسب مراحل می‌تواند با آیکون‌ها جایگزین شود.

خطا (Error)

با تنظیم پراپ 'error' در status می‌توان مشخص کرد که مرحله در وضعیت خطا قرار دارد.

مراحل کنترل شده (Controlled steps)

ما می‌توانیم با کنترل پراپ current مراحل را داینامیک کنیم.

قابل کلیک (Clickable)

با تنظیم پراپ onChange می‌توان مراحل را قابل کلیک کرد.

API

مراحل (Steps)
ویژگیتوضیحاتنوعپیش‌فرض
currentمرحله جاری، از 0 شمرده می‌شودnumber0
onChangeتابعی که هنگام تغییر مراحل فراخوانی می‌شود(index: number) => void-
statusوضعیت مرحله جاری'complete' | 'pending' | 'in-progress' | 'error''in-progress'
verticalآیا مراحل به صورت عمودی نمایش داده شوندbooleanfalse
مراحل.آیتم (Steps.Item)
ویژگیتوضیحاتنوعپیش‌فرض
customIconعنصر سفارشی برای برچسب مرحلهReactNode | string-
descriptionتوضیحات مرحله، فقط برای حالت عمودی قابل استفاده استReactNode | string-
titleعنوان مرحلهReactNode | string-