Компоненты

Tabs

Основы

Для создания вкладок можно использовать компонент Tabs.

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

Для добавления вкладок используется компонент Tab.

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>

Используйте snake_case для наименования ключа tab.

Активная вкладка

Вы можете указать активную вкладку по умолчанию, через метод 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>

Вертикальный режим

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>

Атрибуты для заголовка

Для контента вкладок вы можете указывать HTML-атрибуты через метод customAttributes(), но если требуются атрибуты для заголовка, то воспользуйтесь методом labelAttributes().

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