Tab
Tab component.
Tab, Personalization Blocks
Example:
// AppServiceProvider, "boot" method. TallStackUi::personalize() ->tab() ->block('block', 'classes');
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
<x-tab selected="Tab 1"> <x-tab.items tab="Tab 1"> Tab 1 </x-tab.items> <x-tab.items tab="Tab 2"> Tab 2 </x-tab.items> <x-tab.items tab="Tab 3"> Tab 3 </x-tab.items> <x-tab.items tab="Tab 4"> Tab 4 </x-tab.items> <x-tab.items tab="Tab 5"> Tab 5 </x-tab.items></x-tab>
On mobile devices the tab component displays a HTML select element for tab selection. You can change this behavior
by using the scroll-on-mobile
attribute, which will disable the select button and allow navigation
to occur by natural tab selection.
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
<x-tab selected="Tab 1" scroll-on-mobile> <x-tab.items tab="Tab 1"> Tab 1 </x-tab.items> <x-tab.items tab="Tab 2"> Tab 2 </x-tab.items> <x-tab.items tab="Tab 3"> Tab 3 </x-tab.items> <x-tab.items tab="Tab 4"> Tab 4 </x-tab.items> <x-tab.items tab="Tab 5"> Tab 5 </x-tab.items> <x-tab.items tab="Tab 6"> Tab 6 </x-tab.items> <x-tab.items tab="Tab 7"> Tab 7 </x-tab.items> <x-tab.items tab="Tab 8"> Tab 8 </x-tab.items></x-tab>
Invoices
Transactions
<x-tab selected="Invoices"> <x-tab.items tab="Invoices"> <x-slot:right> <x-icon name="document-text" class="w-5 h-5" /> </x-slot:right> Invoices </x-tab.items> <x-tab.items tab="Transactions"> <x-slot:left> <x-icon name="currency-dollar" class="w-5 h-5" /> </x-slot:left> Transactions </x-tab.items></x-tab>
Invoices
Transactions
<x-tab selected="Invoices" x-on:navigate="alert($event.detail.select)"> <x-tab.items tab="Invoices"> <x-slot:right> <x-icon name="document-text" class="w-5 h-5" /> </x-slot:right> Invoices </x-tab.items> <x-tab.items tab="Transactions"> <x-slot:left> <x-icon name="currency-dollar" class="w-5 h-5" /> </x-slot:left> Transactions </x-tab.items></x-tab>An option to control the tab via Livewire.
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Selected: Tab 1
<!-- Livewire string property: $tab - initial value: "Tab 1" --> <x-tab wire:model="tab"> <x-tab.items tab="Tab 1"> Tab 1 </x-tab.items> <x-tab.items tab="Tab 2"> Tab 2 </x-tab.items> <x-tab.items tab="Tab 3"> Tab 3 </x-tab.items> <x-tab.items tab="Tab 4"> Tab 4 </x-tab.items> <x-tab.items tab="Tab 5"> Tab 5 </x-tab.items></x-tab> <x-button wire:click="$set('tab', 'Tab 5')">Change to Tab 5</x-button>An option to control the tab via Livewire with live updates.
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Selected: Tab 1
<!-- Livewire string property: $tab - initial value: "Tab 1" --> <x-tab wire:model.live="tab"> <x-tab.items tab="Tab 1"> Tab 1 </x-tab.items> <x-tab.items tab="Tab 2"> Tab 2 </x-tab.items> <x-tab.items tab="Tab 3"> Tab 3 </x-tab.items> <x-tab.items tab="Tab 4"> Tab 4 </x-tab.items> <x-tab.items tab="Tab 5"> Tab 5 </x-tab.items></x-tab>