مراحل (Stepper)

معرفی

کامپوننت‌های Stepper و Step برای نمایش مراحل یک فرایند چند مرحله‌ای استفاده می‌شوند. هر مرحله می‌تواند وضعیت «تکمیل‌شده»، «فعال» یا «در انتظار» داشته باشد.

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

• برای فرآیندهای چندمرحله‌ای که ترتیب مشخصی دارند (مثل ثبت‌نام، خرید)
• وقتی کاربر باید پیشرفت خود را در مراحل ببیند
• برای فرم‌های طولانی که به چند مرحله تقسیم شده‌اند

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

• برای navigation بین بخش‌های غیرترتیبی — از Tabs استفاده کنید
• برای فرآیندهای تک‌مرحله‌ای — از Dialog یا Form ساده استفاده کنید

استفاده

import { Stepper, Step } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <Stepper activeStep={1}>
      <Step label="اطلاعات پایه" description="نام و ایمیل" />
      <Step label="تأیید هویت" description="کد پیامکی" />
      <Step label="تکمیل پروفایل" />
    </Stepper>
  )
}

حالت‌ها و انواع

عمودی

اندازه‌ها

Props

Stepper

Step

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

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

• از role="list" و role="listitem" استفاده می‌کند
• وضعیت هر مرحله از طریق aria-label اعلام می‌شود (تکمیل‌شده / فعال / در انتظار)

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

• Tabs — وقتی بخش‌ها ترتیب مشخصی ندارند و کاربر باید آزادانه بین آن‌ها جابجا شود
• الگوهای فرم — راهنمای کامل ساخت فرم‌های چند مرحله‌ای با Stepper