-
-
-
-
-
-
-
Helen Walter
Admin
Steps
ADMIN PANELSteps
Set steps for process using .steps & .step class.
- Register
- Choose plan
- Purchase
- Received
<div class="flex flex-wrap items-center w-full gap-2">
<ul class="w-full steps">
<li class="step step-primary !min-w-[7rem] first:before:hidden"> Register </li>
<li class="step step-primary !min-w-[7rem]"> Choose plan </li>
<li class="step !min-w-[7rem]"> Purchase </li>
<li class="step !min-w-[7rem]"> Received </li>
</ul>
</div>
Responsive Steps
You can set responsive steps for process using .responsive-vertical class.
- Register
- Choose plan
- Purchase
- Received
<div class="flex flex-wrap items-center w-full gap-2">
<ul class="w-full steps 2md:responsive-vertical">
<li class="step step-primary !min-w-[7rem] first:before:hidden"> Register </li>
<li class="step step-primary !min-w-[7rem]"> Choose plan </li>
<li class="step !min-w-[7rem]"> Purchase </li>
<li class="step !min-w-[7rem]"> Received </li>
</ul>
</div>
Colored Steps
You can set colored steps for process using .step-secondary .step-(primary, info, success, warning, danger, light) class.
- Register
- Choose plan
- Purchase
- Received
<div class="flex flex-wrap items-center w-full gap-2">
<ul class="w-full steps">
<li class="step step-secondary !min-w-[7rem] first:before:hidden"> Register </li>
<li class="step step-secondary !min-w-[7rem]"> Choose plan </li>
<li class="step !min-w-[7rem]"> Purchase </li>
<li class="step !min-w-[7rem]"> Received </li>
</ul>
</div>
Multi Colored
You can set colored steps for process using .step-(primary, info, success, warning, danger, light) class.
- start
- end
<div class="flex flex-wrap items-center w-full gap-2">
<ul class="overflow-x-auto steps custom-scroll">
<li class="step">start</li>
<li class="step step-info"></li>
<li class="step step-info"></li>
<li class="step step-info"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-success"></li>
<li class="step step-success"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-warning"></li>
<li class="step step-warning"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-primary"></li>
<li class="step step-primary"></li>
<li class="step"></li>
<li class="step"></li>
<li class="step step-danger"></li>
<li class="step step-danger"></li>
<li class="step step-danger"></li>
<li class="step step-danger">end</li>
</ul>
</div>


