System component Layout

# Make

The Layout system component serves as the basis for building any page in MoonShine.
It includes the body tag and basic markup elements, as well as the necessary classes and scripts.

You can create a Layout using the static make() method class LayoutBuilder.

make(array $components = [])

make(array $components = [])

use MoonShine\Components\LayoutBuilder
use MoonShine\Contracts\MoonShineLayoutContract;
 
final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([ 
            // ...
        ]); 
    }
}

use MoonShine\Components\LayoutBuilder
use MoonShine\Contracts\MoonShineLayoutContract;

final class MoonShineLayout implements MoonShineLayoutContract
{
    public static function build(): LayoutBuilder
    {
        return LayoutBuilder::make([
            // ...
        ]);
    }
}

# Blade

The component can be used in html markup:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      x-data
      :class="$store.darkMode.on && 'dark'"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>{{ config('app.name') }}</title>
 
    @moonShineAssets
</head>
<x-moonshine::layout> 
    //...
</x-moonshine::layout> 
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      x-data
      :class="$store.darkMode.on && 'dark'"
>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    @moonShineAssets
</head>
<x-moonshine::layout>
    //...
</x-moonshine::layout>
</html>