Modal

Modal component.

Modal, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->modal()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

<x-modal>
    TallStackUi
</x-modal>

# Title Slot

<x-modal>
    <x-slot:title>
        TallStackUi
    </x-slot:title>
    TallStackUi
</x-modal>
 
<!-- or -->
 
<x-modal title="TallStackUi">
    TallStackUi
</x-modal>

# Footer Slot

<x-modal>
    TallStackUi
    <x-slot:footer>
        TallStackUi
    </x-slot:footer>
</x-modal>
 
<!-- or -->
 
<x-modal footer="TallStackUi">
    TallStackUi
</x-modal>

# Background Blur

<x-modal title="TallStackUi" blur>
    TallStackUi
</x-modal>

# Size Variations

<!-- sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl -->
 
<x-modal title="TallStackUi" size="2xl">
    TallStackUi
</x-modal>

Applicable only on desktop devices.

# Centered

<x-modal title="TallStackUi" center>
    TallStackUi
</x-modal>

Applicable only on desktop devices.

# Z Index

<x-modal title="TallStackUi" z-index="z-10">
    TallStackUi
</x-modal>

# Persistent

An option to prevent the closing when click outside.

<x-modal title="TallStackUi" persistent>
    TallStackUi
</x-modal>

Make sure to provide some way to close the modal when using this option, such as a button within the modal.

# Wireable

An option to control the modal via Livewire.

<!-- Livewire boolean property: $modal -->
 
<x-modal title="TallStackUi" wire>
    TallStackUi
</x-modal>
 
<x-button wire:click="$toggle('modal')">
    Open
</x-button>

# Wireable Personalized

Customize which property to use to control the modal via Livewire.

<!-- Livewire boolean property: $tallstackui -->
 
<x-modal title="TallStackUi" wire="tallstackui">
    TallStackUi
</x-modal>
 
<x-button wire:click="$toggle('tallstackui')">
    Open
</x-button>

# AlpineJS Helper

Helpers to open and close the modal using AlpineJS.

<x-modal id="modal-id">
    TallStackUi
</x-modal>
 
<x-button x-on:click="$modalOpen('modal-id')">
    Open
</x-button>
 
<x-button x-on:click="$modalClose('modal-id')">
    Close
</x-button>

# Events

An option to listen event when the modal is opening or closing.

<x-modal title="TallStackUi"
         x-on:open="alert('Opened!')"
         x-on:close="alert('Closed!')">
    TallStackUi
</x-modal>

# Configurations

This component contains settings available in the configuration file. Click here to learn more.