Components

Flex

Basics

To position elements on the page, you can use the Flex component. Components inside Flex will be displayed in display: flex mode.

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 - a list of components,
  • $colSpan - the number of columns the block occupies for screen sizes of 1280px and above,
  • $adaptiveColSpan - the number of columns the block occupies for screen sizes up to 1280px,
  • $itemsAlign - an equivalent of the CSS class items-$itemsAlign in Tailwind,
  • $justifyAlign - an equivalent of the CSS class justify-$justifyAlign in Tailwind,
  • $withoutSpace - a flag for margins.
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>

Alignment

To align elements, you can use the itemsAlign() and justifyAlign() methods.

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')

Wrap

To transfer the elements (flex-wrap) you can use the wrap() method.

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