Компоненты

Декоратор Offcanvas

Создание

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

make(Closure|string $title, Closure|View|string $content, Closure|string $toggler = '', Closure|string|null $asyncUrl = '')
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(
            'Подтвердить',
            static fn() => FormBuilder::make(route('password.confirm'))
                ->async()
                ->fields([
                    Password::make('Пароль')->eye(),
                ])
                ->submit('Подтвердить'),
            'Показать панель'
        )
    ];
}
 
//...
use MoonShine\Components\FormBuilder;
use MoonShine\Components\Offcanvas;
use MoonShine\Fields\Password;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Подтвердить',
            static fn() => FormBuilder::make(route('password.confirm'))
                ->async()
                ->fields([
                    Password::make('Пароль')->eye(),
                ])
                ->submit('Подтвердить'),
            'Показать панель'
        )
    ];
}
 
//...

События

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

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

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

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

use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Заголовок',
            'Содержимое...',
        )
            ->name('my-canvas'),
 
        ActionButton::make(
            'Показать панель',
            '/endpoint'
        )
            ->async(events: ['offcanvas-toggled-my-canvas'])
    ];
}
 
//...
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make(
            'Заголовок',
            'Содержимое...',
        )
            ->name('my-canvas'),
 
        ActionButton::make(
            'Показать панель',
            '/endpoint'
        )
            ->async(events: ['offcanvas-toggled-my-canvas'])
    ];
}
 
//...

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

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

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

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

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

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

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

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

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

open(Closure|bool|null $condition = null)
open(Closure|bool|null $condition = null)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
            ->open()
    ];
}
 
//...
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
            ->open()
    ];
}
 
//...

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

Позиция

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

left(Closure|bool|null $condition = null)
left(Closure|bool|null $condition = null)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
            ->left()
    ];
}
 
//...
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
            ->left()
    ];
}
 
//...

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

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

togglerAttributes(array $attributes)
togglerAttributes(array $attributes)
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
            ->togglerAttributes([
                'class' => 'mt-2'
            ]),
    ];
}
 
//...
use MoonShine\Components\Offcanvas;
 
//...
 
public function components(): array
{
    return [
        Offcanvas::make('Заголовок', 'Содержимое...', 'Показать панель')
            ->togglerAttributes([
                'class' => 'mt-2'
            ]),
    ];
}
 
//...