Layout

Вы просматриваете документацию старой версии MoonShine. Рассмотрите возможность обновления вашего проекта до MoonShine 2.x.

Screencasts: Декорация Flex

Разделы
- Flex
- Grid/Column

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

# Flex

Изменение позиционирования полей в линию

use MoonShine\Decorations\Flex;
 
//...
public function fields(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
            // Дополнительные опции
            ->withoutSpace() // Исключить отступы
            ->justifyAlign('start') // На основе tailwind классов justify-[param]
            ->itemsAlign('start') // На основе tailwind классов items-[param]
    ];
}
//...

use MoonShine\Decorations\Flex;

//...
public function fields(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
            // Дополнительные опции
            ->withoutSpace() // Исключить отступы
            ->justifyAlign('start') // На основе tailwind классов justify-[param]
            ->itemsAlign('start') // На основе tailwind классов items-[param]
    ];
}
//...

param	justifyAlign()	itemsAlign()
normal	justify-content: normal;
start	justify-content: flex-start;	align-items: flex-start;
end	justify-content: flex-end;	align-items: flex-end;
center	justify-content: center;	align-items: center;
between	justify-content: space-between;
around	justify-content: space-around;
evenly	justify-content: space-evenly;
baseline		align-items: baseline;
stretch	justify-content: stretch;	align-items: stretch;

# Grid/Column

Сетка с колонками

use MoonShine\Decorations\Grid;
use MoonShine\Decorations\Column;
 
//...
public function fields(): array
{
    return [
        Grid::make([
            Column::make([
                Block::make('Main information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 из 12 - половина экрана
 
            Column::make([
                Block::make('Contact information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 из 12 - половина экрана
        ])
    ];
}
//...

use MoonShine\Decorations\Grid;
use MoonShine\Decorations\Column;

//...
public function fields(): array
{
    return [
        Grid::make([
            Column::make([
                Block::make('Main information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 из 12 - половина экрана

            Column::make([
                Block::make('Contact information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 из 12 - половина экрана
        ])
    ];
}
//...

Результат: две колонки с блоками