Components

Head

Basics

Used to create MoonShine layouts.

The Head component is designed to place document information: metadata (such as the window title or encoding), links to scripts, and stylesheets.

The Head component contains some standard metadata by default.

make(array|iterable $components = [])
make(array|iterable $components = [])
  • $components - array of components.
use MoonShine\UI\Components\Layout\Head;
 
Head::make([
    Meta::make('csrf-token')->customAttributes([
        'content' => 'token',
    ]),
]);
use MoonShine\UI\Components\Layout\Head;
 
Head::make([
    Meta::make('csrf-token')->customAttributes([
        'content' => 'token',
    ]),
]);
<x-moonshine::layout.head>
    <meta name="csrf-token" content="token" />
</x-moonshine::layout.head>
<x-moonshine::layout.head>
    <meta name="csrf-token" content="token" />
</x-moonshine::layout.head>

Parent component: Html.
Child components: Meta, Assets, Favicon.

Page Title

To set the page title, you can use the title() method or specify the corresponding parameter in the Blade component.

title(string $title);
title(string $title);
Head::make([
    // ...
])
    ->title('Page Title');
Head::make([
    // ...
])
    ->title('Page Title');
<x-moonshine::layout.head title='Page Title'>
    // ...
</x-moonshine::layout.head>
<x-moonshine::layout.head title='Page Title'>
    // ...
</x-moonshine::layout.head>

Theme Color

Some browsers allow you to suggest a theme color based on your site's palette. The browser's interface will adapt to the suggested color.

To add a color, you need to use the bodyColor() method or specify the corresponding parameter in the Blade component.

bodyColor(string $color);
bodyColor(string $color);
Head::make([
    // ...
])
    ->bodyColor('#7843e9')
Head::make([
    // ...
])
    ->bodyColor('#7843e9')
<x-moonshine::layout.head bodyColor='#7843e9'>
    // ...
</x-moonshine::layout.head>
<x-moonshine::layout.head bodyColor='#7843e9'>
    // ...
</x-moonshine::layout.head>