Components

Decoration Modal

Make

The Modal decorator allows you to create modal windows. You can create Modal using the static method make().

make(
    Closure|string $title,
    Closure|View|string $content,
    Closure|View|ActionButton|string $outer = '',
    Closure|string|null $asyncUrl = '',
    MoonShineRenderElements|null $components = null
)
make(
    Closure|string $title,
    Closure|View|string $content,
    Closure|View|ActionButton|string $outer = '',
    Closure|string|null $asyncUrl = '',
    MoonShineRenderElements|null $components = null
)
  • $title - modal window title,
  • $content - modal window content,
  • $outer - external block with window call handler,
  • $asyncUrl - url for asynchronous content,
  • $components - components for a modal window.
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'),
            ])
        )
    ];
}
//...
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'),
            ])
        )
    ];
}
//...

Events

You can open or close a modal window not using component via javascript events. To have access to events, you must set a unique name for the modal window using the name() method.

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

calling an event via ActionButton

The modal window event can be triggered using the ActionButton component.

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'])
    ];
}
 
//...
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'])
    ];
}
 
//...

calling an event using native methods

Events can be triggered using native javascript methods:

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

calling an event using the Alpine.js method

Or using the magic $dispatch() method from Alpine.js:

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

More detailed information can be obtained from the official Alpine.js documentation in the sections Events and $dispatch.

Default state

The open() method allows you to open a modal window when loading the page.

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

By default, the modal window will remain closed when the page loads..

Click outside

By default, a modal window closes when clicked outside the window area.The closeOutside() method allows you to override this behavior.

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

Auto close

By default, modal windows close after a successful request the autoClose() method allows you to control this behavior.

autoClose(Closure|bool|null $autoClose = null)
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),
    ];
}
 
//...
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),
    ];
}
 
//...

Width

wide

The wide() method of the Modal component sets the maximum width of the modal window.

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

auto

The auto() method of the Modal component sets the width of the modal window based on the content.

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

The request will be sent once, but if you need to send a request every time you open it, then use the data-always-load attribute

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

Outer attributes

The outerAttributes() method allows you to set additional attributes for the outer $outer block.

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