new
Livewire Volt extension for VSCode. Voltage →
maryUI

Steps

Example

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

// step model
public int $step = 2;
Register step
Payment step
Receive Product 
<x-steps wire:model="step" class="border my-5 p-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-orange-500/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" />

Style

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

<x-steps wire:model="example" steps-color="step-warning">
    <x-step step="1" text="A" />
    <x-step step="2" text="B" />
    <x-step step="3" text="C" data-content="✓" step-classes="!step-success" />
</x-steps>
 
<hr class="my-5" />
 
<x-button label="Previous" wire:click="prev2" />
<x-button label="Next" wire:click="next2" />
maryUI
Sponsor