Components

Modal

Basics

The Modal component allows you to create modal windows. You can create a Modal using the static method 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 - title of the modal window,
  • $content - content of the modal window,
  • $outer - external block with the trigger for the window,
  • $asyncUrl - URL for asynchronous content,
  • $components - components for the modal window.
use MoonShine\UI\Components\Modal;Modal::make( title: 'Confirm', content: 'Content')
use MoonShine\UI\Components\Modal;
 
Modal::make(
    title: 'Confirm',
    content: 'Content'
)
Content...
Open 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>

Events

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

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

Triggering an Event via ActionButton

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

Modal::make( 'Title', 'Content', ) ->name('my-modal'), ActionButton::make('Show Modal') ->toggleModal('my-modal') // or asynchronously 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')
 
// or asynchronously
ActionButton::make(
    'Show Modal',
    '/endpoint'
)
    ->async(events: [AlpineJs::event(JsEvent::MODAL_TOGGLED, 'my-modal')])

Triggering an Event Using Native Methods

Events can be triggered using native javascript methods:

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

Triggering an Event with Alpine.js Method

Or using the magical method $dispatch() from *alpine.js:

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

Triggering an Event with Global MoonShine Class

MoonShine.ui.toggleModal('my-modal') 
MoonShine.ui.toggleModal('my-modal')

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

Open/Close

You can also add events when opening/closing the modal window using the toggleEvents method.

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

The parameters onlyOpening and onlyClosing allow you to configure whether events will fire on opening and closing. By default, both parameters are set to TRUE, which means the event list will be triggered on both opening and closing of the modal.

Default State

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

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

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

Click Outside

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

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

Auto Close

By default, modal windows close after a successful request (for example, when submitting a form). The autoClose() method allows you to control this behavior.

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

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)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#')) ->wide(), 
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)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#')) ->auto(), 
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#'))
            ->auto(),

Asynchronicity

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 each time it opens, use the alwaysLoad method.

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

Outer Attributes

The outerAttributes() method allows you to set additional attributes for the external block $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

The moonshine::modal component is used to create modal windows.

Content...
Open 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>

Wide Modal

The wide parameter allows modal windows to fill the entire width.

Content...
Open wide 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 Width

The auto parameter allows modal windows to take width based on content.

Content...
Open auto 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>

Closing Window

By default, modal windows close when clicking outside the window area. You can override this behavior using the closeOutside parameter.

Content...
Open 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>

Asynchronous Content

The moonshine::modal component allows for loading content asynchronously.

Open async 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>