Decoration Modal

# Make

Декоратор Modal позволяет создавать модальные окна.

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

make(
Closure|string $title,
Closure|View|string $content,
Closure|View|ActionButton|string $outer = '',
Closure|string|null $asyncUrl = '',
MoonShineRenderElements|null $components = null
)
  • $title - заголовок модального окна,
  • $content - контент модального окна,
  • $outer - внешний блок с обработчиком вызова окна,
  • $asyncUrl - url для асинхронного контента,
  • $components - компоненты для модального окна.
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\FormBuilder;
use MoonShine\Components\Modal;
use MoonShine\Fields\Password;
use MoonShine\Pages\PageComponents;
 
//...
 
public function components(): array
{
return [
Modal::make(
title: 'Confirm',
outer: ActionButton::make('Show modal', '#'),
components: PageComponents::make([
FormBuilder::make(route('password.confirm'))
->async()
->fields([
Password::make('Password')->eye(),
])
->submit('Confirm'),
])
)
];
}
 
//...

# События

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

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

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

use MoonShine\Components\Modal;
 
//...
 
public function components(): array
{
return [
Modal::make(
'Title',
'Content...',
)
->name('my-modal'),
 
ActionButton::make(
'Show modal',
'#'
)
->toggleModal('my-modal')
 
// or async
ActionButton::make(
'Show modal',
'/endpoint'
)
->async(events: ['modal-toggled-my-modal'])
];
}
 
//...
вызов события нативными методами

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

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

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

this.$dispatch('modal-toggled-my-modal')

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

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

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

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

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

# Клик вне окна

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

use MoonShine\Components\Modal;
 
//...
 
public function components(): array
{
return [
Modal::make('Title', 'Content...', ActionButton::make('Show modal', '#'))
->closeOutside(false),
];
}
 
//...

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

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

autoClose(Closure|bool|null $autoClose = null)
use MoonShine\Components\Modal;
 
//...
 
public function components(): array
{
return [
Modal::make(
'Demo modal',
static fn() => FormBuilder::make(route('alert.post'))
->fields([
Text::make('Text'),
])
->submit('Send', ['class' => 'btn-primary'])
->async(),
)
->name('demo-modal')
->autoClose(false),
];
}
 
//...

# Ширина окна

wide

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

wide(Closure|bool|null $condition = null)
use MoonShine\Components\Modal;
 
//...
 
public function components(): array
{
return [
Modal::make('Title', 'Content...', ActionButton::make('Show modal', '#'))
->wide(),
];
}
 
//...
auto

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

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

# Async

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

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

Modal::make(...)
->customAttributes(['data-always-load' => true]),

# Атрибуты внешнего блока

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

outerAttributes(array $attributes)
use MoonShine\Components\Modal;
 
//...
 
public function components(): array
{
return [
Modal::make('Title', 'Content...', ActionButton::make('Show modal', '#'))
->outerAttributes([
'class' => 'mt-2'
]),
];
}
 
//...