Modal

Вы просматриваете документацию старой версии MoonShine. Рассмотрите возможность обновления вашего проекта до MoonShine 2.x.

Разделы
- Основы
- Широкое окно

# Основы

Для создания модальных окон используется компонент moonshine::modal

<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

<x-moonshine::modal title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

Open modal

# Широкое окно

Параметр wide позволяет модальным окнам занимать всю ширину.

<x-moonshine::modal wide title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open wide modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

<x-moonshine::modal wide title="Title">
    <div>
        Content...
    </div>
    <x-slot name="outerHtml">
        <x-moonshine::link @click.prevent="toggleModal;">
            Open wide modal
        </x-moonshine::link>
    </x-slot>
</x-moonshine::modal>

Open wide modal