Tabs

Tabs component.

Tab, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->tab()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

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

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>