Компоненты

OffCanvas

Основы

Компонент Offcanvas позволяет создавать боковые панели. Вы можете создать Offcanvas, используя статический метод make().

make(
    Closure|string $title = '',
    Closure|Renderable|string $content = '',
    Closure|string $toggler = '',
    Closure|string|null $asyncUrl = null,
    iterable $components = [],
)
make(
    Closure|string $title = '',
    Closure|Renderable|string $content = '',
    Closure|string $toggler = '',
    Closure|string|null $asyncUrl = null,
    iterable $components = [],
)
  • $title - заголовок боковой панели,
  • $content - содержимое боковой панели,
  • $toggler - заголовок для кнопки,
  • $asyncUrl - url для асинхронного контента,
  • $components - компоненты
 namespaces
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'
)
 namespaces
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::off-canvas
    title="Offcanvas"
    :left="false"
>
    <x-slot:toggler>
         Open
    </x-slot:toggler>
    Content
</x-moonshine::off-canvas>
<x-moonshine::off-canvas
    title="Offcanvas"
    :left="false"
>
    <x-slot:toggler>
         Open
    </x-slot:toggler>
    Content
</x-moonshine::off-canvas>

Параметр content - это текстовое содержимое OffCanvas. Подходит для отображения простой информации (строк, HTML и т.д.). Однако, если вы хотите встроить в OffCanvas компоненты (например, поля или формы, реагирующие на изменение значений, реактивность и т.д.), важно понимать, что MoonShine не сможет "увидеть" такие компоненты, переданные как строка. Это ограничивает функциональность. Чтобы MoonShine корректно обрабатывал поля внутри OffCanvas, необходимо передать их в параметре components.

Если вы строите контент OffCanvas исключительно на компонентах MoonShine (поля, формы и т.д.), используйте параметр components вместо content.

События

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

protected function components(): iterable
{
    return [
        Offcanvas::make(
            'Title',
            'Content...'
        )
            ->name('my-canvas')
    ];
}
protected function components(): iterable
{
    return [
        Offcanvas::make(
            'Title',
            'Content...'
        )
            ->name('my-canvas')
    ];
}

Вызов события через ActionButton

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

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

Вызов события с использованием нативных методов

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

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

Вызов события с использованием метода Alpine.js

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

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

Вызов события с использованием глобального класса MoonShine

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

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

События при открытии/закрытии

Вы также можете добавить события, которые будут вызываться при открытии/закрытии боковой панели, через метод toggleEvents().

toggleEvents(
    array $events,
    bool $onlyOpening = false,
    bool $onlyClosing = false
)
toggleEvents(
    array $events,
    bool $onlyOpening = false,
    bool $onlyClosing = false
)
  • $events - события,
  • $onlyOpening - будут срабатывать только при открытии,
  • $onlyClosing - будут срабатывать только при закрытии.
ActionButton::make('Open off-canvas')
    ->toggleOffCanvas('my-off-canvas'),
 
OffCanvas::make('My OffCanvas', asyncUrl: '/')
    ->name('my-off-canvas')
    ->toggleEvents([
        AlpineJs::event(
            JsEvent::TOAST,
            params: ['text' => 'Hello off-canvas']
        )
    ]),
ActionButton::make('Open off-canvas')
    ->toggleOffCanvas('my-off-canvas'),
 
OffCanvas::make('My OffCanvas', asyncUrl: '/')
    ->name('my-off-canvas')
    ->toggleEvents([
        AlpineJs::event(
            JsEvent::TOAST,
            params: ['text' => 'Hello off-canvas']
        )
    ]),

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

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

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

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

Позиция

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

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

Ширина

Метод wide() компонента OffCanvas позволяет сделать боковую панель более широкой.

wide(Closure|bool|null $condition = null)
wide(Closure|bool|null $condition = null)
  • $condition - условие выполнения метода.
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->wide()
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->wide()

Метод full() устанавливает максимальную ширину для боковой панели.

full(Closure|bool|null $condition = null)
full(Closure|bool|null $condition = null)
  • $condition - условие выполнения метода.
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->full()
OffCanvas::make('Title', 'Content...', 'Show Panel')
    ->full()

Асинхронность

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

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

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

Автозакрытие

По умолчанию OffCanvas закрывается после успешной отправки асинхронной формы внутри него. Метод autoClose() позволяет управлять этим поведением.

autoClose(Closure|bool|null $autoClose = null)
autoClose(Closure|bool|null $autoClose = null)
OffCanvas::make(
    'Demo OffCanvas',
    static fn() => FormBuilder::make(route('alert.post'))
        ->fields([
            Text::make('Text'),
        ])
        ->submit('Submit', ['class' => 'btn-primary'])
        ->async(),
    )
    ->name('demo-offcanvas')
    ->autoClose(false),
OffCanvas::make(
    'Demo OffCanvas',
    static fn() => FormBuilder::make(route('alert.post'))
        ->fields([
            Text::make('Text'),
        ])
        ->submit('Submit', ['class' => 'btn-primary'])
        ->async(),
    )
    ->name('demo-offcanvas')
    ->autoClose(false),

Автозакрытие

По умолчанию боковые панели закрываются после успешного запроса (к примеру при отправке формы). Метод autoClose() позволяет управлять этим поведением.

autoClose(Closure|bool|null $autoClose = null)
autoClose(Closure|bool|null $autoClose = null)
OffCanvas::make(
    'Заголовок',
    static fn() => FormBuilder::make(route('endpoint'))
        ->fields([
            Text::make('Text'),
        ])
        ->submit('Submit', ['class' => 'btn-primary'])
        ->async(),
    'Показать панель'
)
    ->autoClose(false),
OffCanvas::make(
    'Заголовок',
    static fn() => FormBuilder::make(route('endpoint'))
        ->fields([
            Text::make('Text'),
        ])
        ->submit('Submit', ['class' => 'btn-primary'])
        ->async(),
    'Показать панель'
)
    ->autoClose(false),

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

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

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