Components

Tabs

Basics

To create tabs, you can use the Tabs component.

make(iterable $components = [])
make(iterable $components = [])

To add tabs, the Tab component is used.

make(
    Closure|string|iterable $labelOrComponents = [],
    iterable $components = [],
)
make(
    Closure|string|iterable $labelOrComponents = [],
    iterable $components = [],
)
 namespaces
use MoonShine\UI\Components\Tabs;
use MoonShine\UI\Components\Tabs\Tab;
use MoonShine\UI\Fields\Text;
 
Tabs::make([
    Tab::make('Tab 1', [
        Text::make('Text 1')
    ]),
    Tab::make('Tab 2', [
        Text::make('Text 2')
    ]),
]),
 namespaces
use MoonShine\UI\Components\Tabs;
use MoonShine\UI\Components\Tabs\Tab;
use MoonShine\UI\Fields\Text;
 
Tabs::make([
    Tab::make('Tab 1', [
        Text::make('Text 1')
    ]),
    Tab::make('Tab 2', [
        Text::make('Text 2')
    ]),
]),
<x-moonshine::tabs
    :items="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2',
        'tab_3' => 'Tab 3',
    ]"
>
    <x-slot:tab_1>
        Tab 1 content
    </x-slot>
 
    <x-slot name="tab_2">
        Tab 2 content
    </x-slot>
 
    <x-slot:tab_3>
        Tab 3 content
    </x-slot>
</x-moonshine::tabs>
<x-moonshine::tabs
    :items="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2',
        'tab_3' => 'Tab 3',
    ]"
>
    <x-slot:tab_1>
        Tab 1 content
    </x-slot>
 
    <x-slot name="tab_2">
        Tab 2 content
    </x-slot>
 
    <x-slot:tab_3>
        Tab 3 content
    </x-slot>
</x-moonshine::tabs>

Use snake_case for naming the tab key.

Active Tab

You can specify the default active tab by setting active.

Tabs::make([
    Tab::make('Tab 1', [
        Text::make('Text 1')
    ]),
    Tab::make('Tab 2', [
        Text::make('Text 2')
    ])->active(),
]),
 
// Condition
 
Tabs::make([
    Tab::make('Tab 1', [
        Text::make('Text 1')
    ])->active(session()->has('key')),
    Tab::make('Tab 2', [
        Text::make('Text 2')
    ])->active(!session()->has('key')),
]),
Tabs::make([
    Tab::make('Tab 1', [
        Text::make('Text 1')
    ]),
    Tab::make('Tab 2', [
        Text::make('Text 2')
    ])->active(),
]),
 
// Condition
 
Tabs::make([
    Tab::make('Tab 1', [
        Text::make('Text 1')
    ])->active(session()->has('key')),
    Tab::make('Tab 2', [
        Text::make('Text 2')
    ])->active(!session()->has('key')),
]),
<x-moonshine::tabs
    :items="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2',
        'tab_3' => 'Tab 3',
    ]"
    active="tab_2"
>
    <x-slot:tab_1>
        Tab 1 content
    </x-slot>
 
    <x-slot name="tab_2">
        Tab 2 content
    </x-slot>
 
    <x-slot:tab_3>
        Tab 3 content
    </x-slot>
</x-moonshine::tabs>
<x-moonshine::tabs
    :items="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2',
        'tab_3' => 'Tab 3',
    ]"
    active="tab_2"
>
    <x-slot:tab_1>
        Tab 1 content
    </x-slot>
 
    <x-slot name="tab_2">
        Tab 2 content
    </x-slot>
 
    <x-slot:tab_3>
        Tab 3 content
    </x-slot>
</x-moonshine::tabs>

Vertical mode

Tabs::make([
    // ..
])->vertical(),
Tabs::make([
    // ..
])->vertical(),
<x-moonshine::tabs :isVertical="true"
    :items="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2',
        'tab_3' => 'Tab 3',
    ]"
>
    <x-slot:tab_1>
        Tab 1 content
    </x-slot>
 
    <x-slot name="tab_2">
        Tab 2 content
    </x-slot>
 
    <x-slot:tab_3>
        Tab 3 content
    </x-slot>
</x-moonshine::tabs>
<x-moonshine::tabs :isVertical="true"
    :items="[
        'tab_1' => 'Tab 1',
        'tab_2' => 'Tab 2',
        'tab_3' => 'Tab 3',
    ]"
>
    <x-slot:tab_1>
        Tab 1 content
    </x-slot>
 
    <x-slot name="tab_2">
        Tab 2 content
    </x-slot>
 
    <x-slot:tab_3>
        Tab 3 content
    </x-slot>
</x-moonshine::tabs>

Label attributes

For the tab content, you can specify HTML-attributes through the method customAttributes(), But if attributes are required for the heading, then use the labelAttributes().

Tabs::make([
    Tabs\Tab::make([
        // ..
    ])->labelAttributes(['x-show' => '!flag'])
]),
Tabs::make([
    Tabs\Tab::make([
        // ..
    ])->labelAttributes(['x-show' => '!flag'])
]),