Components

Decoration Offcanvas

Make

The Offcanvas decorator allows you to create sidebars. You can create Offcanvas using the static make() method.

make(Closure|string $title, Closure|View|string $content, Closure|string $toggler = '', Closure|string|null $asyncUrl = '')
  • $title - sidebar title,
  • $content - sidebar content,
  • $toggler - title for button,
  • $asyncUrl - url for asynchronous content
use MoonShine\Components\FormBuilder;
use MoonShine\Components\Offcanvas;
use MoonShine\Fields\Password;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Confirm',
            static fn() => FormBuilder::make(route('password.confirm'))
                ->async()
                ->fields([
                    Password::make('Password')->eye(),
                ])
                ->submit('Confirm'),
            'Show canvas'
        )
    ];
}
 
//...

Events

You can show or hide a sidebar not from a component through javascript events. To have access to events, you must set a unique name for the sidebar using the name() method.

use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Title',
            'Content...'
        )
            ->name('my-canvas')
    ];
}
 
//...

calling an event via ActionButton

The sidebar event can be triggered using the ActionButton component.

use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Title',
            'Content...',
        )
            ->name('my-canvas'),
 
        ActionButton::make(
            'Show canvas',
            '/endpoint'
        )
            ->async(events: ['offcanvas-toggled-my-canvas'])
    ];
}
 
//...

calling an event using native methods

Events can be triggered using native javascript methods:

document.addEventListener("DOMContentLoaded", () => {
    this.dispatchEvent(new Event("offcanvas-toggled-my-canvas"))
})

calling an event using the Alpine.js method

Or use the magic $dispatch() method from Alpine.js:

this.$dispatch('offcanvas-toggled-my-canvas')

More detailed information can be obtained from the official Alpine.js documentation in the sections Events and $dispatch.

Default state

The open() method allows you to show the sidebar when the page loads.

open(Closure|bool|null $condition = null)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Title', 'Content...', 'Show canvas')
            ->open()
    ];
}
 
//...

By default, the sidebar will be hidden when the page loads.

Position

By default, the sidebar is located on the right side of the screen, the left() method allows you to position the panel on the left side.

left(Closure|bool|null $condition = null)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Title', 'Content...', 'Show canvas')
            ->left()
    ];
}
 
//...

Toggler attributes

The toggler Attributes() method allows you to set additional attributes for the $toggler toggle.

togglerAttributes(array $attributes)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Title', 'Content...', 'Show canvas')
            ->togglerAttributes([
                'class' => 'mt-2'
            ]),
    ];
}
 
//...