Компоненты

Компонент Tabs

Создание

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

use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
use MoonShine\Fields\Text;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                Text::make('Seo заголовок')
 
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
        ])
    ];
}
 
//...
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
use MoonShine\Fields\Text;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                Text::make('Seo заголовок')
 
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
        ])
    ];
}
 
//...

Вертикальное отображение вкладок

Метод vertical() позволяет отображать вкладки в вертикальном режиме.

vertical(Closure|bool|null $condition = null)
vertical(Closure|bool|null $condition = null)
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
        ])->vertical()
    ];
}
//...
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
        ])->vertical()
    ];
}
//...

По умолчанию минимальная ширина блока вкладок, при которой меняется отображение на встроенное, составляет 480px. Вы можете изменить значение минимальной ширины через метод customAttributes():

Tabs::make([
        //...
    ])
    ->customAttributes([
        'data-tabs-vertical-min-width' => 600
    ])
Tabs::make([
        //...
    ])
    ->customAttributes([
        'data-tabs-vertical-min-width' => 600
    ])

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

Метод active() позволяет указать, какая вкладка должна быть активной по умолчанию.

use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
                ->active()
        ])
    ];
}
 
//...
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
                ->active()
        ])
    ];
}
 
//...

Иконка

use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
                ->icon('heroicons.outline.pencil')
        ])
    ];
}
 
//...
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Категории', [
                //...
            ])
                ->icon('heroicons.outline.pencil')
        ])
    ];
}
 
//...

ID вкладки

Метод uniqueId() позволяет установить ID вкладки. Таким образом вы можете реализовать собственную логику для вкладок с использованием Alpine.js.

uniqueId(string $id)
uniqueId(string $id)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Вкладка 1', [
                //...
 
                ActionButton::make('Перейти к вкладке 2')->onClick(fn() => 'setActiveTab(`my-tab-2`)', 'prevent'),
            ])
                ->uniqueId('my-tab-1'),
 
            Tab::make('Вкладка 2', [
                //...
 
                ActionButton::make('Перейти к вкладке 1')->onClick(fn() => 'setActiveTab(`my-tab-1`)', 'prevent'),
            ])
                ->uniqueId('my-tab-2')
        ])
    ];
}
 
//...
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Вкладка 1', [
                //...
 
                ActionButton::make('Перейти к вкладке 2')->onClick(fn() => 'setActiveTab(`my-tab-2`)', 'prevent'),
            ])
                ->uniqueId('my-tab-1'),
 
            Tab::make('Вкладка 2', [
                //...
 
                ActionButton::make('Перейти к вкладке 1')->onClick(fn() => 'setActiveTab(`my-tab-1`)', 'prevent'),
            ])
                ->uniqueId('my-tab-2')
        ])
    ];
}
 
//...