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 = [],)
-
$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')
<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'), ];} //...
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 asynchronouslyActionButton::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"))})
Triggering an Event with Alpine.js Method
Or using the magical method $dispatch()
from *alpine.js
:
this.$dispatch('modal_toggled:my-modal')
Triggering an Event with Global MoonShine Class
MoonShine.ui.toggleModal('my-modal')
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)
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)
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),
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)
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)
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)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#')) ->auto(),
Asynchronicity
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(),
Outer Attributes
The outerAttributes()
method allows you to set additional attributes for the external block $outer
.
outerAttributes(array $attributes)
Modal::make('Title', 'Content...', ActionButton::make('Show Modal', '#')) ->outerAttributes([ 'class' => 'mt-2' ]),
Blade
The moonshine::modal
component is used to create modal windows.
<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.
<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.
<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.
<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.
<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>