MoonShine - admin panel for Laravel projects

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

use MoonShine\Decorations\Flex;

//...

public function components(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
    ];
}

//...

Flex Flex Dark

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

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]
    ];
}

//...

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

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.

Grid Grid Dark