new
Livewire Volt extension for VSCode. Voltage →

Tabs

Usage

Users
Tricks
Musics

<x-tabs wire:model="selectedTab">
<x-tab name="users-tab" label="Users" icon="o-users">
<div>Users</div>
</x-tab>
<x-tab name="tricks-tab" label="Tricks" icon="o-sparkles">
<div>Tricks</div>
</x-tab>
<x-tab name="musics-tab" label="Musics" icon="o-musical-note">
<div>Musics</div>
</x-tab>
</x-tabs>
 
<hr class="my-5">
 
<x-button label="Change to Musics" @click="$wire.selectedTab = 'musics-tab'" />

Slots

Use slots to customize the tab label.

Users
Tricks
Musics
<x-tabs wire:model="selectedTab">
<x-tab name="users-tab">
<x-slot:label>
Users
<x-badge value="3" class="badge-primary" />
</x-slot:label>
 
<div>Users</div>
</x-tab>
<x-tab name="tricks-tab" label="Tricks">
<div>Tricks</div>
</x-tab>
<x-tab name="musics-tab" label="Musics">
<div>Musics</div>
</x-tab>
</x-tabs>

Disabled state

Users
Tricks
Musics
Stars
<x-tabs wire:model="selectedTab">
<x-tab name="users-tab" label="Users">
<div>Users</div>
</x-tab>
<x-tab name="tricks-tab" label="Tricks">
<div>Tricks</div>
</x-tab>
<x-tab name="musics-tab" label="Musics">
<div>Musics</div>
</x-tab>
<x-tab name="stars-tab" label="Stars" disabled>
<div>Stars</div>
</x-tab>
</x-tabs>

Customisation

Remember to add these custom classes on Tailwind safelist.
All
Tricks
Musics
<x-tabs
wire:model="selectedTab"
active-class="bg-primary rounded text-white"
label-class="font-semibold"
label-div-class="bg-primary/5 p-2 rounded"
>
<x-tab name="users-tab" label="Users">
<div>All</div>
</x-tab>
<x-tab name="tricks-tab" label="Tricks">
<div>Tricks</div>
</x-tab>
<x-tab name="musics-tab" label="Musics">
<div>Musics</div>
</x-tab>
</x-tabs>

maryUI
Sponsor