Компоненты

Основы
Заголовок
Темный стиль
Иконка

Основы

Для выделения контента можно использовать компонент Box. Компонент идеально подходит для выделения областей.

make(
    Closure|string|iterable $labelOrComponents = [],
    iterable $components = []
)

make(
    Closure|string|iterable $labelOrComponents = [],
    iterable $components = []
)make(
    Closure|string|iterable $labelOrComponents = [],
    iterable $components = []
)

make(
    Closure|string|iterable $labelOrComponents = [],
    iterable $components = []
)

$labelOrComponents - содержит компоненты для отображения в блоке или текст для заголовка. Если первый параметр - строка, то это - заголовок,
$components - содержит компоненты для отображения в блоке. Используется, если первым параметром указан заголовок.

use MoonShine\UI\Components\Layout\Box;
use MoonShine\UI\Components\Alert;
 
Box::make([
    Alert::make()->content('Text')
]);
use MoonShine\UI\Components\Layout\Box;use MoonShine\UI\Components\Alert;Box::make([    Alert::make()->content('Text')]);use MoonShine\UI\Components\Layout\Box;
use MoonShine\UI\Components\Alert;
 
Box::make([
    Alert::make()->content('Text')
]);
use MoonShine\UI\Components\Layout\Box;use MoonShine\UI\Components\Alert;Box::make([    Alert::make()->content('Text')]);

<x-moonshine::layout.box>
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box>    {{ 'Hello!' }}</x-moonshine::layout.box><x-moonshine::layout.box>
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box>    {{ 'Hello!' }}</x-moonshine::layout.box>

Заголовок

Если нужно отобразить заголовок, то просто передайте его первым параметром, а вторым список компонентов.

Box::make('Title box', ['Hello!']);
Box::make('Title box', ['Hello!']);Box::make('Title box', ['Hello!']);
Box::make('Title box', ['Hello!']);

<x-moonshine::layout.box title="Title box">
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box title="Title box">    {{ 'Hello!' }}</x-moonshine::layout.box><x-moonshine::layout.box title="Title box">
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box title="Title box">    {{ 'Hello!' }}</x-moonshine::layout.box>

Темный стиль

Вы можете установить темный стиль для блока с помощью метода dark() в классе.

Box::make(['Hello!'])->dark();
Box::make(['Hello!'])->dark();Box::make(['Hello!'])->dark();
Box::make(['Hello!'])->dark();

<x-moonshine::layout.box dark>
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box dark>    {{ 'Hello!' }}</x-moonshine::layout.box><x-moonshine::layout.box dark>
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box dark>    {{ 'Hello!' }}</x-moonshine::layout.box>

Иконка

Чтобы отобразить иконку в блоке, используется метод icon().

Box::make('Title box', ['Hello!'])->icon('users');
Box::make('Title box', ['Hello!'])->icon('users');Box::make('Title box', ['Hello!'])->icon('users');
Box::make('Title box', ['Hello!'])->icon('users');

<x-moonshine::layout.box title="Title box">
    <x-moonshine::icon name="users"></x-moonshine::icon>
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box title="Title box">    <x-moonshine::icon name="users"></x-moonshine::icon>    {{ 'Hello!' }}</x-moonshine::layout.box><x-moonshine::layout.box title="Title box">
    <x-moonshine::icon name="users"></x-moonshine::icon>
    {{ 'Hello!' }}
</x-moonshine::layout.box>
<x-moonshine::layout.box title="Title box">    <x-moonshine::icon name="users"></x-moonshine::icon>    {{ 'Hello!' }}</x-moonshine::layout.box>