Components

OffCanvas

Basics

The Offcanvas component allows you to create side panels. You can create an Offcanvas using the static method make().

make(
    Closure|string $title = '',
    Closure|Renderable|string $content = '',
    Closure|string $toggler = '',
    Closure|string|null $asyncUrl = null,
    iterable $components = [],
)
  • $title - the title of the side panel,
  • $content - the content of the side panel,
  • $toggler - the title for the button,
  • $asyncUrl - the URL for asynchronous content,
  • $components - components
use MoonShine\UI\Components\OffCanvas;
 
OffCanvas::make(
    'Confirm',
    static fn() => FormBuilder::make(route('password.confirm'))
        ->async()
        ->fields([
            Password::make('Password')->eye(),
        ])
        ->submit('Confirm'),
    'Show Panel'
)
<x-moonshine::offcanvas
    title="Offcanvas"
    :left="false"
>
    <x-slot:toggler>
         Open
    </x-slot:toggler>
    {{ fake()->text() }}
</x-moonshine::offcanvas>

Events

You can show or hide the side panel outside of the component using JavaScript events. To access the events, you need to set a unique name for the side panel using the name() method.

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

Triggering Event via ActionButton

The side panel event can be triggered using the ActionButton component.

Offcanvas::make(
    'Title',
    'Content...',
)
    ->name('my-canvas'),
 
ActionButton::make('Show Modal')
    ->toggleOffCanvs('my-canvas')
 
// or asynchronously
ActionButton::make(
    'Show Panel',
    '/endpoint'
)
    ->async(events: [AlpineJs::event(JsEvent::OFF_CANVAS_TOGGLED, 'my-canvas')])

Triggering Event Using Native Methods

Events can be triggered using native JavaScript methods:

document.addEventListener("DOMContentLoaded", () => {
    this.dispatchEvent(new CustomEvent("off_canvas_toggled:my-canvas"))
})

Triggering Event Using Alpine.js Method

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

this.$dispatch('off_canvas_toggled:my-canvas')

Triggering Event Using Global MoonShine Class

MoonShine.ui.toggleOffCanvas('my-canvas')

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

Open/Close

You can also add events when opening/closing the side panel using the toggleEvents method.

toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
ActionButton::make('Open off-canvas')->toggleOffCanvas('my-off-canvas'),
 
OffCanvas::make('My OffCanvas', asyncUrl: '/')
    ->name('my-off-canvas')
    ->left()
    ->toggleEvents([
        AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello off-canvas'])
    ]),

The parameters onlyOpening and onlyClosing allow you to configure whether events will be triggered on opening and closing. By default, both parameters are set to TRUE, meaning that the event list will be triggered both when opening and closing the side panel.

Default State

The open() method allows you to show the side panel on page load.

open(Closure|bool|null $condition = null)
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->open()

By default, the side panel will be hidden on page load.

Position

By default, the side panel is positioned 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)
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->left()

Asynchronous

OffCanvas::make('Title', '', 'Show Panel', asyncUrl: '/endpoint'),

The request will be sent only once, but if you need to send the request each time it opens, use the alwaysLoad method.

OffCanvas::make(...)
        ->alwaysLoad(),

Toggler Attributes

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

togglerAttributes(array $attributes)
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->togglerAttributes([
        'class' => 'mt-2'
    ]),