Tabs

# Make

Компонент 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 title')
 
                //...
            ]), 
            Tab::make('Categories', [
                //...
            ])
        ]) 
    ];
}
 
//...

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

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

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('Categories', [
                //...
            ])
 
        ])->vertical() 
    ];
}
//...

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

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('Categories', [
                //...
            ])
                ->active() 
        ])
    ];
}
 
//...

# Иконка 

use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Categories', [
                //...
            ])
                ->icon('heroicons.outline.pencil') 
        ])
    ];
}
 
//...

# ID вкладки

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

uniqueId(string $id)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Tab 1', [
                //...
 
                ActionButton::make('Go to tab 2')->onClick(fn() => 'setActiveTab(`my-tab-2`)', 'prevent'),
            ])
                ->uniqueId('my-tab-1'), 
 
            Tab::make('Tab 2', [
                //...
 
                ActionButton::make('Go to tab 1')->onClick(fn() => 'setActiveTab(`my-tab-1`)', 'prevent'),
            ])
                ->uniqueId('my-tab-2') 
        ])
    ];
}
 
//...
Компоненты
Offcanvas
Компоненты
When