Компоненты

Flex

Основы

Для расположения элементов на странице можно использовать компонент Flex. Компоненты внутри Flex будут отображаться в режиме display: flex.

make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
    string $itemsAlign = 'center',
    string $justifyAlign = 'center',
    bool $withoutSpace = false
)
make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
    string $itemsAlign = 'center',
    string $justifyAlign = 'center',
    bool $withoutSpace = false
)
  • $components - список компонентов,
  • $colSpan - количество колонок, которые занимает блок для размеров экрана 1280px и более,
  • $adaptiveColSpan - количество колонок, которые занимает блок для размеров экрана до 1280px,
  • $itemsAlign - аналог css класса items-$itemsAlign в Tailwind,
  • $justifyAlign - аналог css класса justify-$justifyAlign в Tailwind,
  • $withoutSpace - флаг для отступов.
use MoonShine\UI\Components\Layout\Flex;
 
Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
]),
use MoonShine\UI\Components\Layout\Flex;
 
Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
]),
<x-moonshine::layout.flex :justifyAlign="'end'">
    <div>Text 1</div>
    <div>Text 2</div>
</x-moonshine::layout.flex>
<x-moonshine::layout.flex :justifyAlign="'end'">
    <div>Text 1</div>
    <div>Text 2</div>
</x-moonshine::layout.flex>

Выравнивание

Для выравнивания элементов вы можете использовать методы itemsAlign() и justifyAlign().

Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
])
    ->justifyAlign('between')
    ->itemsAlign('start')
Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
])
    ->justifyAlign('between')
    ->itemsAlign('start')

Перенос

Для переноса элементов (flex-wrap) вы можете использовать метод wrap().

Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
])
    ->wrap()
Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
])
    ->wrap()