V2 is in public beta! 🎉 Report any issues on the repository.

Powerful suite of Blade components for TALL Stack apps.

Step

Step components.

# Basic Usage

Step one...
Step two...
Step three... finished! 
<x-step selected="1" navigate>
    <x-step.items step="1">
        Step one...
    </x-step.items>
    <x-step.items step="2">
        Step two...
    </x-step.items>
    <x-step.items step="3">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Title & Description

Step one...
Step two...
Step three... finished! 
<x-step selected="1" navigate>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Final Step

An option to mark the final step and not move forward.

Step one...
Step two...
Step three... finished! 
<x-step selected="1" navigate>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  completed 
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Helpers

An option to disable navigation with clicks and use buttons.

Step one...
Step two...
Step three... finished! 
<x-step selected="1" helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Allow Navigation Previous

An option to enable the navigation to the previous.

Step one...
Step two...
Step three... finished! 
<x-step selected="1" helpers navigate-previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Alternative Styles

An option to use other two different styles, totaling 3 styles.

Circles

Step one...
Step two...
Step three... finished!

Panels

Step one...
Step two...
Step three... finished! 
<!-- Circles -->
<x-step selected="1"
        circles 
        helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>
 
<!-- Panels -->
<x-step selected="1"
        panels 
        helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Finish Slot

Step one...
Step two...
Step three... finished!
TallStackUI 🚀 
<x-step selected="1" helpers>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
    <x-slot:finish>
        TallStackUI 🚀
    </x-slot:finish>
</x-step>

# Wireable

Step one...
Step two...
Step three... finished! 
<!--  Livewire string property: $step - initial value: "1" -->
 
<x-step wire:model="step"
        helpers
        previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Live Wireable

Step one...
Step two...
Step three... finished!

Selected: 1

<!--  Livewire string property: $step - initial value: "1" -->
 
<x-step wire:model.live="step"
        helpers
        previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

# Events

Step one...
Step two...
Step three... finished! 
<x-step selected="1"
        helpers
        x-on:change="alert(`Changed: ${$event.detail.step}`)"
        x-on:finish="alert(`Finished: ${$event.detail.step}`)">
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three"
                  completed>
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>

Code highlighting provided by Torchlight