Decoration Layout

Sometimes, for ease of perception, it is necessary to divide the form into several blocks. By default they are located one below the other, but with the help of Layout decorations you can easily change the display order.

# Flex

The Flex decoration gives elements the appropriate positioning.

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'),
        ])
    ];
}

//...

Additional options

use MoonShine\Decorations\Flex;
 
//...
 
public function components(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
            ->withoutSpace() // Eliminate indentation 
            ->justifyAlign('start') // Based on tailwind classes justify-[param] 
            ->itemsAlign('start') // Based on tailwind classes items-[param] 
    ];
}
 
//...

use MoonShine\Decorations\Flex;

//...

public function components(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
            ->withoutSpace() // Eliminate indentation
            ->justifyAlign('start') // Based on tailwind classes justify-[param]
            ->itemsAlign('start') // Based on tailwind classes 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

The Grid and Column decorators allow you to organize a grid with columns.

The columnSpan() method allows you to set the width of a block in a Grid.

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)

columnSpan(
    int $columnSpan,
    int $adaptiveColumnSpan = 12
)

$columnSpan - relevant for desktop version,
$adaptiveColumnSpan - relevant for the mobile version.

use MoonShine\Decorations\Grid; 
use MoonShine\Decorations\Column; 
 
//...
public function components(): array
{
    return [
        Grid::make([ 
            Column::make([
                // ...
            ])
                ->columnSpan(6), 
 
            Column::make([ 
                // ...
            ])
                ->columnSpan(6) 
        ])
    ];
}
 
//...

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

//...
public function components(): array
{
    return [
        Grid::make([
            Column::make([
                // ...
            ])
                ->columnSpan(6),

            Column::make([
                // ...
            ])
                ->columnSpan(6)
        ])
    ];
}

//...

The MoonShine admin panel uses a 12-column grid.