Компоненты

Декораторы Layout

Иногда для удобства восприятия необходимо разделить форму на несколько блоков. По умолчанию они расположены один под другим, но с помощью декораторов Layout вы можете легко изменить порядок отображения.

Flex

Декорация Flex придает элементам соответствующее позиционирование.

use MoonShine\Decorations\Flex;
 
//...
 
public function components(): array
{
    return [
        Flex::make([
            Text::make('Заголовок'),
            Text::make('Слаг'),
        ])
    ];
}
 
//...
use MoonShine\Decorations\Flex;
 
//...
 
public function components(): array
{
    return [
        Flex::make([
            Text::make('Заголовок'),
            Text::make('Слаг'),
        ])
    ];
}
 
//...

Дополнительные опции

use MoonShine\Decorations\Flex;
 
//...
 
public function components(): array
{
    return [
        Flex::make([
            Text::make('Заголовок'),
            Text::make('Слаг'),
        ])
            ->withoutSpace() // Убрать отступы
            ->justifyAlign('start') // На основе tailwind классов justify-[param]
            ->itemsAlign('start') // На основе tailwind классов items-[param]
    ];
}
 
//...
use MoonShine\Decorations\Flex;
 
//...
 
public function components(): array
{
    return [
        Flex::make([
            Text::make('Заголовок'),
            Text::make('Слаг'),
        ])
            ->withoutSpace() // Убрать отступы
            ->justifyAlign('start') // На основе tailwind классов justify-[param]
            ->itemsAlign('start') // На основе tailwind классов items-[param]
    ];
}
 
//...

Grid/Column

Декораторы Grid и Column позволяют организовать сетку с колонками.

Метод columnSpan() позволяет установить ширину блока в Grid.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)
columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)

$columnSpan - актуально для десктопной версии, $adaptiveColumnSpan - актуально для мобильной версии.

use MoonShine\Decorations\Grid;
use MoonShine\Decorations\Column;
 
//...
public function components(): array
{
    return [
        Grid::make([
            Column::make([
                // ...
            ])
                ->columnSpan(6),
 
            Column::make([
                // ...
            ])
                ->columnSpan(6)
        ])
    ];
}
 
//...
use MoonShine\Decorations\Grid;
use MoonShine\Decorations\Column;
 
//...
public function components(): array
{
    return [
        Grid::make([
            Column::make([
                // ...
            ])
                ->columnSpan(6),
 
            Column::make([
                // ...
            ])
                ->columnSpan(6)
        ])
    ];
}
 
//...

Админ-панель MoonShine использует 12-колоночную сетку.