Components

Tabs

Make

The Tabs component allows you to create 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', [ ]) ]) ]; } 
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', [
                //...
            ])
        ])
    ];
}
 
//...
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', [
                //...
            ])
        ])
    ];
}
 
//...

tabs tabs_dark

Vertical display of the tabs.

The method vertical() allows you to display tabs in vertical mode.

vertical(Closure|bool|null $condition = null) 
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('Categories', [ ]) ])->vertical() ]; } 
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Categories', [
                //...
            ])
        ])->vertical()
    ];
}
//...
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Categories', [
                //...
            ])
        ])->vertical()
    ];
}
//...

tabs_vertical tabs_vertical_dark

By default, the minimum width of a tabbed block at which the inline display changes is 480px. You can change the minimum width value via the method customAttributes():

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

Active tab

The method active() allows you to specify which tab should be active by default.

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', [
                //...
            ])
                ->active()
        ])
    ];
}
 
//...
use MoonShine\Decorations\Tabs;
use MoonShine\Decorations\Tab;
 
//...
 
public function components(): array
{
    return [
        Tabs::make([
            Tab::make('Seo', [
                //...
            ]),
            Tab::make('Categories', [
                //...
            ])
                ->active()
        ])
    ];
}
 
//...

Icon

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') ]) ]; } 
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')
        ])
    ];
}
 
//...
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')
        ])
    ];
}
 
//...

Tab ID

The uniqueId() method allows you to set the tab ID. This way you can implement your own logic for tabs using Alpine.js.

uniqueId(string $id) 
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('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') ]) ]; } 
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')
        ])
    ];
}
 
//...
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')
        ])
    ];
}
 
//...