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

# 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'), 
    ];
}
 
//...
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']) 
    ];
}
 
//...
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"))
})
calling an event using the Alpine.js method

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

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

# 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)
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

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

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

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

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'),

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]),

# Outer attributes

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

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