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.

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