Stepper

کامپوننت‌های x-stepper و x-stepper-step برای ساخت مراحل چندگانه (Stepper) در صفحات Blade استفاده می‌شوند. این کامپوننت‌ها امکان نمایش مراحل مختلف یک فرآیند (مانند ثبت‌نام چندمرحله‌ای، فرم‌های چندگانه و ...) را با قابلیت شخصی‌سازی کامل فراهم می‌کنند.

ویژگی‌ها

پشتیبانی از چندین مرحله (Step) در یک Stepper
امکان تعیین شناسه یکتا (id) و کلاس سفارشی (class) برای Stepper و هر Step
قابلیت فعال‌سازی یا غیرفعال‌سازی بازگشت به مراحل قبلی (allowBackTracking)
امکان تعیین عنوان، آیکون، دکمه بعدی و قبلی برای هر مرحله
قابلیت استفاده از اسلات هدر سفارشی برای هر Step
پشتیبانی از نمایش Stepper درون Modal با پراپ targetModal
کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade

ورودی‌های کامپوننت

x-stepper

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`'x-component-stepper-<rand>'`	شناسه یکتا برای Stepper (در صورت عدم تعیین، تصادفی ساخته می‌شود)
`class`	`string`	`null`	کلاس CSS اضافی برای Stepper
`allowBackTracking`	`bool`	`false`	اجازه بازگشت به مراحل قبلی (در صورت true، کاربر می‌تواند به عقب برگردد)

x-stepper-step

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`'stepper-step-<rand>'`	شناسه یکتا برای Step (در صورت عدم تعیین، تصادفی ساخته می‌شود)
`title`	`string`	`null`	عنوان مرحله (در هدر Stepper نمایش داده می‌شود)
`icon`	`string`	`'fa-solid fa-info'`	آیکون مرحله (کلاس آیکون FontAwesome یا ...)
`nextButton`	`string`	`'بعدی'`	متن دکمه مرحله بعد
`prevButton`	`string`	`'قبلی'`	متن دکمه مرحله قبل
`active`	`bool`	`false`	فعال بودن مرحله (مرحله جاری)
`visible`	`bool`	`true`	نمایش مرحله در لود اولیه
`headerSlot`	`string`	`null`	اسلات هدر سفارشی (HTML)
`targetModal`	`string`	`null`	شناسه Modal هدف (در صورت استفاده از Stepper در Modal)
`href`	`string`	`null`	لینک مقصد در صورت تبدیل مرحله به لینک

🕹️ متدها

متد	توضیحات
`$("#stepper-id").goToNextStep()`	➡️ رفتن به مرحله بعد
`$("#stepper-id").goToPrevStep()`	⬅️ بازگشت به مرحله قبل
`$("#stepper-id").goToStep(stepIndex)`	🎯 رفتن به مرحله مشخص (مثلاً ۲)
`$("#stepper-id").getCurrentStep()`	ℹ️ دریافت شماره مرحله جاری
`$("#stepper-id").toggleStepVisibility(step, forceVisibility)`	✨ نمایش یا مخفی‌کردن مرحله مشخص (با پارامتر اختیاری forceVisibility جهت تعیین اجباری وضعیت)

برای نمایش یا مخفی‌کردن یک مرحله می‌توانید از اندیس یا id آن به صورت زیر استفاده کنید

$("#simple-stepper").toggleStepVisibility("#step-2");
$("#simple-stepper").toggleStepVisibility(2);

نکات مهم

مقدار id در هر دو کامپوننت در صورت عدم تعیین، به صورت تصادفی ساخته می‌شود تا از تداخل جلوگیری شود.
پراپ allowBackTracking در Stepper تعیین می‌کند که کاربر بتواند به مراحل قبلی بازگردد یا خیر.
پراپ active فقط برای یک Step باید true باشد (مرحله فعال).
پراپ headerSlot برای نمایش محتوای سفارشی در هدر Step (مثلاً توضیحات یا تصویر) استفاده می‌شود.

مثال‌ها

نمونه پایه

<x-stepper id="sample-stepper" :allow-back-tracking="true">
    <x-stepper.step next-button="بعدی" prev-button="بازگشت" title="اطلاعات درخواست" icon="fa-solid fa-info">
        <x-slot:header-slot>
            <x-badge value="الزامی" appearance="light" variant="danger" size="sm" />
        </x-slot:header-slot>

        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-stepper.step>

    <x-stepper.step next-button="بعدی" prev-button="قبلی" title="پیوست‌ها" icon="fa-solid fa-paperclip" :active="true">
        <x-slot:header-slot>
            <x-badge value="الزامی" appearance="light" variant="danger" size="sm" />
        </x-slot:header-slot>

        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-stepper.step>

    <x-stepper.step next-button="بعدی" prev-button="قبلی" title="صورتحساب" icon="fa-solid fa-file-invoice">
        <x-slot:header-slot>
            <x-badge value="اختیاری" appearance="light" variant="secondary" size="sm" />
        </x-slot:header-slot>

        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-stepper.step>

    <x-stepper.step
        next-button="بعدی"
        prev-button="قبلی"
        title="بررسی و تایید"
        icon="fa-solid fa-user-magnifying-glass"
    >
        <x-slot:header-slot>
            <x-badge value="اختیاری" appearance="light" variant="secondary" size="sm" />
        </x-slot:header-slot>

        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-stepper.step>

    <x-stepper.step next-button="ثبت نهایی" prev-button="قبلی" title="کد رهگیری" icon="fa-solid fa-qrcode">
        <x-slot:header-slot>
            <x-badge value="نهایی" appearance="light" variant="success" size="sm" />
        </x-slot:header-slot>

        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-stepper.step>

    <div class="d-flex justify-content-end gap-2 mt-5">
        <x-button
            id="sample-stepper-prev-button"
            variant="secondary"
            size="md"
            title="قبلی"
            icon="fa-solid fa-arrow-right"
            icon-position="right"
            stepper-id="sample-stepper"
            stepper-action="prev"
        />
        <x-button
            id="sample-stepper-next-button"
            variant="primary"
            size="md"
            title="بعدی"
            icon="fa-solid fa-arrow-left"
            icon-position="left"
            stepper-id="sample-stepper"
            stepper-action="next"
        />
    </div>
</x-stepper>

ویژگی‌ها​

ورودی‌های کامپوننت​

x-stepper​

x-stepper-step​

🕹️ متدها​

مثال‌ها​

نمونه پایه​