Tab

Tab component.

Tab, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->tab()
    ->block('block', 'classes');

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

# 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>

# 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>