Layout

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections
- Flex
- Grid/Column

Sometimes it is necessary to divide the form into several blocks for convenience, by default they go under each other, but with the help of scenery Layout you can easily change the display

# Flex

Changing the positioning of the fields in the line

use MoonShine\Decorations\Flex;
 
    //...
    public function fields(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
            // Additional options
            ->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 fields(): array
{
    return [
        Flex::make([
            Text::make('Title'),
            Text::make('Slug'),
        ])
            // Additional options
            ->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

Grid with speakers

use MoonShine\Decorations\Grid;
use MoonShine\Decorations\Column;
 
//...
public function fields(): array
{
    return [
        Grid::make([
            Column::make([
                Block::make('Main information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 out of 12 is half of the screen
 
            Column::make([
                Block::make('Contact information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 out of 12 is half of the screen
        ])
    ];
}
//...

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

//...
public function fields(): array
{
    return [
        Grid::make([
            Column::make([
                Block::make('Main information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 out of 12 is half of the screen

            Column::make([
                Block::make('Contact information', [
                    // Fields here
                ])
            ])->columnSpan(6), // 6 out of 12 is half of the screen
        ])
    ];
}
//...

The result is two columns with blocks