Basics
To highlight content, you can use the Box component. The component is perfect for highlighting areas.
make(Closure|string|iterable $labelOrComponents = [],iterable $components = [],)-
$labelOrComponents- contains components to display in the block or text for the heading. If the first parameter is a string, then it is the heading, -
$components- contains components to display in the block. Used when the first parameter specifies the heading.
use MoonShine\UI\Components\Layout\Box;use MoonShine\UI\Components\Alert; Box::make([ Alert::make()->content('Text')]);<x-moonshine::layout.box> {{ 'Hello!' }}</x-moonshine::box>Heading
If you need to display a heading, simply pass it as the first parameter and a list of components as the second.
Box::make('Title box', ['Hello!']);<x-moonshine::box title="Title box"> {{ 'Hello!' }}</x-moonshine::box>Dark Style
You can set a dark style for the box using the dark() method in the class.
Box::make(['Hello!'])->dark();<x-moonshine::box dark> {{ 'Hello!' }}</x-moonshine::box>Icon
To display an icon in the box, use the icon method.
Box::make('Title box', ['Hello!'])->icon('users');<x-moonshine::box title="Title box"> <x-moonshine::icon name="users"></x-moonshine::icon> {{ 'Hello!' }}</x-moonshine::box>