Компоненты

Modal

Основы

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

make(
    Closure|string $title = '',
    protected Closure|Renderable|string $content = '',
    protected Closure|Renderable|ActionButtonContract|string $outer = '',
    protected Closure|string|null $asyncUrl = null,
    iterable $components = [],
)
make(
    Closure|string $title = '',
    protected Closure|Renderable|string $content = '',
    protected Closure|Renderable|ActionButtonContract|string $outer = '',
    protected Closure|string|null $asyncUrl = null,
    iterable $components = [],
)
  • $title - заголовок модального окна,
  • $content - содержимое модального окна,
  • $outer - внешний блок с обработчиком вызова окна,
  • $asyncUrl - url для асинхронного контента,
  • $components - компоненты для модального окна.
 namespaces
use MoonShine\UI\Components\Modal;
 
Modal::make(
    title: 'Confirm',
    content: 'Content'
)
 namespaces
use MoonShine\UI\Components\Modal;
 
Modal::make(
    title: 'Confirm',
    content: 'Content'
)
<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

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

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

Подзаголовок

Метод subtitle() позволяет задать подзаголовок для модального окна. Подзаголовок отображается под основным заголовком меньшим шрифтом.

subtitle(string $subtitle)
subtitle(string $subtitle)
 namespaces
use MoonShine\UI\Components\Modal;
 
Modal::make('Title')
    ->subtitle('Modal subtitle'),
 namespaces
use MoonShine\UI\Components\Modal;
 
Modal::make('Title')
    ->subtitle('Modal subtitle'),
<x-moonshine::modal title="Title" subtitle="Modal subtitle">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title" subtitle="Modal subtitle">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

События

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

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

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

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

Modal::make(
    'Title',
    'Content',
)
    ->name('my-modal'),
 
ActionButton::make('Show Modal')
    ->toggleModal('my-modal')
 
// с передачей asyncUrl
ActionButton::make('Show Modal')
    ->toggleModal('my-modal', '/async-endpoint')
 
// или асинхронно
ActionButton::make(
    'Show Modal',
    '/endpoint'
)
    ->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])
Modal::make(
    'Title',
    'Content',
)
    ->name('my-modal'),
 
ActionButton::make('Show Modal')
    ->toggleModal('my-modal')
 
// с передачей asyncUrl
ActionButton::make('Show Modal')
    ->toggleModal('my-modal', '/async-endpoint')
 
// или асинхронно
ActionButton::make(
    'Show Modal',
    '/endpoint'
)
    ->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])

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

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

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

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

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

this.$dispatch('modal_toggled:my-modal')
this.$dispatch('modal_toggled:my-modal')

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

MoonShine.ui.toggleModal('my-modal')
 
// с передачей asyncUrl
MoonShine.ui.toggleModal('my-modal', '/async-endpoint')
MoonShine.ui.toggleModal('my-modal')
 
// с передачей asyncUrl
MoonShine.ui.toggleModal('my-modal', '/async-endpoint')

При передаче asyncUrl модалка обновит свой URL и загрузит новый контент при открытии.

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

Открытие/Закрытие

Вы также можете добавить события при открытии/закрытии модального окна через метод toggleEvents

toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
toggleEvents(array $events, bool $onlyOpening = false, $onlyClosing = false)
ActionButton::make('Open modal')->toggleModal('my-modal'),
 
Modal::make('My modal', asyncUrl: '/')
    ->name('my-modal')
    ->toggleEvents([
        AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
    ], onlyOpening: false, onlyClosing: true),
ActionButton::make('Open modal')->toggleModal('my-modal'),
 
Modal::make('My modal', asyncUrl: '/')
    ->name('my-modal')
    ->toggleEvents([
        AlpineJs::event(JsEvent::TOAST, params: ['text' => 'Hello'])
    ], onlyOpening: false, onlyClosing: true),

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

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

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

open(Closure|bool|null $condition = null)
open(Closure|bool|null $condition = null)
Modal::make('Title', 'Content...', view('path'))
    ->open(),
Modal::make('Title', 'Content...', view('path'))
    ->open(),

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

Клик вне окна

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

Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
    ->closeOutside(false),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
    ->closeOutside(false),

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

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

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

Ширина

wide

Метод wide() компонента Modal устанавливает максимальную ширину модального окна.

wide(Closure|bool|null $condition = null)
wide(Closure|bool|null $condition = null)
Modal::make('Заголовок', 'Содержимое...', ActionButton::make('Показать модальное окно', '#'))
    ->wide(),
Modal::make('Заголовок', 'Содержимое...', ActionButton::make('Показать модальное окно', '#'))
    ->wide(),

full

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

full(Closure|bool|null $condition = null)
full(Closure|bool|null $condition = null)
Modal::make('Заголовок', 'Содержимое...', ActionButton::make('Показать модальное окно', '#'))
    ->full(),
Modal::make('Заголовок', 'Содержимое...', ActionButton::make('Показать модальное окно', '#'))
    ->full(),

auto

Метод auto() компонента Modal устанавливает ширину модального окна на основе содержимого.

auto(Closure|bool|null $condition = null)
auto(Closure|bool|null $condition = null)
Modal::make('Заголовок', 'Содержимое...', ActionButton::make('Показать модальное окно', '#'))
    ->auto(),
Modal::make('Заголовок', 'Содержимое...', ActionButton::make('Показать модальное окно', '#'))
    ->auto(),

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

Modal::make(
    'Title',
    '',
    ActionButton::make('Show Modal', '#'),
    asyncUrl: '/endpoint'
),
Modal::make(
    'Title',
    '',
    ActionButton::make('Show Modal', '#'),
    asyncUrl: '/endpoint'
),

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

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

Внешние атрибуты

Метод outerAttributes() позволяет установить дополнительные атрибуты для внешнего блока $outer.

outerAttributes(array $attributes)
outerAttributes(array $attributes)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
    ->outerAttributes([
        'class' => 'mt-2'
    ]),
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
    ->outerAttributes([
        'class' => 'mt-2'
    ]),

Blade

Для создания модальных окон используется компонент moonshine::modal.

<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

Подзаголовок

Параметр subtitle позволяет задать подзаголовок для модального окна.

<x-moonshine::modal title="Title" subtitle="Modal subtitle">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal title="Title" subtitle="Modal subtitle">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

Широкое окно

Параметр wide позволяет модальным окнам заполнять всю ширину.

<x-moonshine::modal wide title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open wide modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal wide title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open wide modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

Автоматическая ширина

Параметр auto позволяет модальным окнам занимать ширину на основе содержимого.

<x-moonshine::modal auto title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open auto modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal auto title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open auto modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

Закрытие окна

По умолчанию модальные окна закрываются при клике вне области окна. Вы можете переопределить это поведение с помощью параметра closeOutside.

<x-moonshine::modal :closeOutside="false" title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal :closeOutside="false" title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>

Асинхронный контент

Компонент moonshine::modal позволяет загружать контент асинхронно.

<x-moonshine::modal
    async
    :asyncUrl="route('async')"
    title="Title"
>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open async modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>
<x-moonshine::modal
    async
    :asyncUrl="route('async')"
    title="Title"
>
    <x-slot name="outerHtml">
        <x-moonshine::link-button @click.prevent="toggleModal">
            Open async modal
        </x-moonshine::link-button>
    </x-slot>
</x-moonshine::modal>