V2 is now our main version. V1 is considered EoL!

Powerful suite of Blade components for TALL Stack apps.

Tab

Tab component.

# Basic Usage

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>

# Scroll on Mobile

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>

# Slots

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>

# Events

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>

# Wireable

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>

# Live Wireable

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>

Code highlighting provided by Torchlight