Decoration Offcanvas

# Make

Декоратор Offcanvas позволяет создавать боковые панели.

Создать Offcanvas можно воспользовавшись статическим методом make(). 

make(Closure|string $title, Closure|View|string $content, Closure|string $toggler = '', Closure|string|null $asyncUrl = '')
  • $title - заголовок боковой панели,
  • $content - контент боковой панели,
  • $toggler - заголовок для переключателя,
  • $asyncUrl - url для асинхронного контента.
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'
        ) 
    ];
}
 
//...

# События

Показать или скрыть боковую панель не из компонента можно через javascript событиями.
Чтобы иметь доступ к событиям, необходимо задать уникальное имя боковой панели, используя метод name(). 

use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Title',
            'Content...'
        )
            ->name('my-canvas') 
    ];
}
 
//...
вызов события через ActionButton

Событие боковой панели можно вызвать, воспользовавшись компонентом ActionButton. 

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']) 
    ];
}
 
//...
вызов события нативными методами

События можно вызвать воспользовавшись нативными методами javascript: 

document.addEventListener("DOMContentLoaded", () => {
    this.dispatchEvent(new Event("offcanvas-toggled-my-canvas"))
})
вызов события методом Alpine.js

Или воспользоваться магическим методом $dispatch() от Alpine.js: 

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

Более подробную информацию можно получить из официальной документации Alpine.js в разделах Events и $dispatch .

# Состояние по умолчанию

Метод open() позволяет показать боковую панель при загрузке страницы. 

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

По умолчанию при загрузке страницы боковая панель будет скрыта.

# Расположение

По умолчанию боковая панель располагается с правой стороны экрана, метод left() позволяет расположить панель с левой стороны. 

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

# Атрибуты переключателя

Метод togglerAttributes() позволяет установить дополнительные атрибуты для переключателя $toggler. 

togglerAttributes(array $attributes)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Title', 'Content...', 'Show canvas')
            ->togglerAttributes([
                'class' => 'mt-2'
            ]), 
    ];
}
 
//...
Компоненты
Modal
Компоненты
Tabs