maryUI

Steps

Alternately check the Timeline component.

Example

This component uses ul and li HTML tags. Make sure you have an extra rule to not override them on your custom CSS.

  • Register
  • Payment
  • Receive Product
Payment step 
<x-steps wire:model="step" class="border-y border-base-content/10 my-5 py-5">
    <x-step step="1" text="Register">
        Register step
    </x-step>
    <x-step step="2" text="Payment">
        Payment step
    </x-step>
    <x-step step="3" text="Receive Product" class="bg-warning/20">
        Receive Product
    </x-step>
</x-steps>
 
{{-- Create some methods to increase/decrease the model to match the step number --}}
{{-- You could use Alpine with `$wire` here --}}
<x-button label="Previous" wire:click="prev" />
<x-button label="Next" wire:click="next" />
// Step model
public int $step = 2;

Customizing

Remember that if you are using deeper CSS classes than steps-xxxx provided by daisyUI you must configure the Tailwind safelist.

Steps color and content.

  • A
  • B
  • C 
<x-steps wire:model="example" steps-color="step-primary">
    <x-step step="1" text="A" />
    <x-step step="2" text="B" icon="o-user" />
    <x-step step="3" text="C" data-content="✓" />
</x-steps>
<hr class="my-5 border-base-content/10" />      
<x-button label="Previous" wire:click="prev2" />   
<x-button label="Next" wire:click="next2" />

You can modify the stepper style itself using the stepper-classes attribute.

  • A
  • B
  • C 
<x-steps wire:model="example" stepper-classes="w-full p-5 bg-base-200">
    <x-step step="1" text="A" />
    <x-step step="2" text="B" />
    <x-step step="3" text="C" />
</x-steps>
<hr class="my-5 border-base-content/10" />      
<x-button label="Previous" wire:click="prev2" />   
<x-button label="Next" wire:click="next2" />
Made with by Robson Tenório and contributors.