Компоненты

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 - компоненты
use MoonShine\UI\Components\OffCanvas;
 
OffCanvas::make(
    'Подтвердить',
    static fn() => FormBuilder::make(route('password.confirm'))
        ->async()
        ->fields([
            Password::make('Пароль')->eye(),
        ])
        ->submit('Подтвердить'),
    'Показать панель'
)
use MoonShine\UI\Components\OffCanvas;
 
OffCanvas::make(
    'Подтвердить',
    static fn() => FormBuilder::make(route('password.confirm'))
        ->async()
        ->fields([
            Password::make('Пароль')->eye(),
        ])
        ->submit('Подтвердить'),
    'Показать панель'
)
<x-moonshine::off-canvas
    title="Offcanvas"
    :left="false"
>
    <x-slot:toggler>
         Open
    </x-slot:toggler>
    {{ fake()->text() }}
</x-moonshine::off-canvas>
<x-moonshine::off-canvas
    title="Offcanvas"
    :left="false"
>
    <x-slot:toggler>
         Open
    </x-slot:toggler>
    {{ fake()->text() }}
</x-moonshine::off-canvas>

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

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

События

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

use MoonShine\UI\Components\OffCanvas;
 
// ...
 
protected function components(): iterable
{
    return [
        Offcanvas::make(
            'Заголовок',
            'Содержимое...'
        )
            ->name('my-canvas')
    ];
}
 
// ...
use MoonShine\UI\Components\OffCanvas;
 
// ...
 
protected function components(): iterable
{
    return [
        Offcanvas::make(
            'Заголовок',
            'Содержимое...'
        )
            ->name('my-canvas')
    ];
}
 
// ...

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

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

Offcanvas::make(
    'Заголовок',
    'Содержимое...',
)
    ->name('my-canvas'),
 
ActionButton::make('Показать модальное окно')
    ->toggleOffCanvs('my-canvas')
 
// или асинхронно
ActionButton::make(
    'Показать панель',
    '/endpoint'
)
    ->async(events: [AlpineJs::event(JsEvent::OFF_CANVAS_TOGGLED, 'my-canvas')])
Offcanvas::make(
    'Заголовок',
    'Содержимое...',
)
    ->name('my-canvas'),
 
ActionButton::make('Показать модальное окно')
    ->toggleOffCanvs('my-canvas')
 
// или асинхронно
ActionButton::make(
    'Показать панель',
    '/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, $onlyClosing = false)
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'])
    ]),
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'])
    ]),

Параметры onlyOpening и onlyClosing позволяют настраивать, будут ли события срабатывать при открытии и закрытии. По умолчанию оба параметра установлены в TRUE, что означает, что список событий будет вызываться как при открытии боковой панели, так и при её закрытии.

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

Метод 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('Заголовок', '', 'Показать панель', asyncUrl: '/endpoint'),
OffCanvas::make('Заголовок', '', 'Показать панель', asyncUrl: '/endpoint'),

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

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

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

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

togglerAttributes(array $attributes)
togglerAttributes(array $attributes)
OffCanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
    ->togglerAttributes([
        'class' => 'mt-2'
    ]),
OffCanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
    ->togglerAttributes([
        'class' => 'mt-2'
    ]),