Decoration Layout

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

# Flex

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

use MoonShine\Decorations\Flex;
 
//...
 
public function components(): array
{
return [
Flex::make([
Text::make('Title'),
Text::make('Slug'),
])
];
}
 
//...
Дополнительные опции
use MoonShine\Decorations\Flex;
 
//...
 
public function components(): 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

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

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

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

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