Компоненты

Основы
Колонки
Пример

Основы

Для расположения элементов на странице можно использовать компонент Grid.

make(
    iterable $components = [],
    int $gap = 6,
)

make(
    iterable $components = [],
    int $gap = 6,
)make(
    iterable $components = [],
    int $gap = 6,
)

make(
    iterable $components = [],
    int $gap = 6,
)

$components - набор компонентов,
$gap - отступ между компонентами.

Колонки

Чтобы расположить элементы внутри Grid, используется компонент Column.

make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
)

make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
)make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
)

make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
)

$components - набор компонентов,
$colSpan - количество колонок, которые занимает блок для размеров экрана 1280px и более,
$adaptiveColSpan - количество колонок, которые занимает блок для размеров экрана до 1280px.

Сетка состоит из 12 колонок.

Пример

 namespaces
use MoonShine\UI\Components\Layout\Column;
use MoonShine\UI\Components\Layout\Grid;
use MoonShine\UI\Fields\Text;
 
Grid::make([
    Column::make(
        [
            Text::make('Text')
        ],
        colSpan: 6,
        adaptiveColSpan: 6
    ),
    Column::make(
        [
            Text::make('Text')
        ],
        colSpan: 6,
        adaptiveColSpan: 6
    ),
])
use MoonShine\UI\Components\Layout\Column;use MoonShine\UI\Components\Layout\Grid;use MoonShine\UI\Fields\Text;Grid::make([    Column::make(        [            Text::make('Text')        ],        colSpan: 6,        adaptiveColSpan: 6    ),    Column::make(        [            Text::make('Text')        ],        colSpan: 6,        adaptiveColSpan: 6    ),]) namespaces
use MoonShine\UI\Components\Layout\Column;
use MoonShine\UI\Components\Layout\Grid;
use MoonShine\UI\Fields\Text;
 
Grid::make([
    Column::make(
        [
            Text::make('Text')
        ],
        colSpan: 6,
        adaptiveColSpan: 6
    ),
    Column::make(
        [
            Text::make('Text')
        ],
        colSpan: 6,
        adaptiveColSpan: 6
    ),
])
use MoonShine\UI\Components\Layout\Column;use MoonShine\UI\Components\Layout\Grid;use MoonShine\UI\Fields\Text;Grid::make([    Column::make(        [            Text::make('Text')        ],        colSpan: 6,        adaptiveColSpan: 6    ),    Column::make(        [            Text::make('Text')        ],        colSpan: 6,        adaptiveColSpan: 6    ),])

<x-moonshine::layout.grid>
    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">
        {{ fake()->text() }}
    </x-moonshine::layout.column>
    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">
        {{ fake()->text() }}
    </x-moonshine::layout.column>
</x-moonshine::layout.grid>
<x-moonshine::layout.grid>    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">        {{ fake()->text() }}    </x-moonshine::layout.column>    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">        {{ fake()->text() }}    </x-moonshine::layout.column></x-moonshine::layout.grid><x-moonshine::layout.grid>
    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">
        {{ fake()->text() }}
    </x-moonshine::layout.column>
    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">
        {{ fake()->text() }}
    </x-moonshine::layout.column>
</x-moonshine::layout.grid>
<x-moonshine::layout.grid>    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">        {{ fake()->text() }}    </x-moonshine::layout.column>    <x-moonshine::layout.column adaptiveColSpan="6" colSpan="6">        {{ fake()->text() }}    </x-moonshine::layout.column></x-moonshine::layout.grid>