Tabs
Usage
<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.
<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>
Customisation
Remember to add these custom classes on Tailwind safelist.
<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