mds components
mds:stepper
Checkout steps, with the completed ones ticked.
The step labels are yours, so the component is language-agnostic; the numbers and the nav's accessible label follow the digit config.
<mds:stepper :steps="['Cart', 'Shipping', 'Payment', 'Review']" :current="2" class="w-full" />First and last step
<div class="w-full space-y-6">
<mds:stepper :steps="['Cart', 'Shipping', 'Payment']" :current="1" class="w-full" />
<mds:stepper :steps="['Cart', 'Shipping', 'Payment']" :current="3" class="w-full" />
</div>Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — switches the step numbers to Persian digits and the nav's accessible label to مراحل; :fa="true" does it for a single stepper. On an RTL page the steps flow right-to-left by themselves.
<mds:stepper :steps="['سبد خرید', 'آدرس و زمان ارسال', 'پرداخت', 'تأیید نهایی']" :current="2" :fa="true" class="w-full" />Reference
mds:stepper
| Prop | Description |
|---|---|
| steps | Array of step labels. |
| current | 1-based index of the active step. Default: 1. |
| fa | Persian digits and built-in strings. Default: config('mds.persian_digits'). |