PineUiPhoenix.Modal (Pine UI v0.1.3)
View SourceProvides modal dialog components for displaying content that requires user attention.
The Modal module offers different variants:
basic/1
- Standard modal dialog with customizable sizefull_screen/1
- Full screen modal that covers the entire viewportside/1
- Slide-in modal that appears from the side of the screen
Summary
Functions
Renders a basic modal dialog component.
Renders a full screen modal that covers the entire viewport.
Renders a slide-over modal that appears from the side of the screen.
Functions
Renders a basic modal dialog component.
This component creates a modal dialog that appears centered on the screen. It includes a backdrop overlay, title, optional close button, and content area.
Examples
<.basic id="confirm-modal" title="Confirm Action">
<p>Are you sure you want to perform this action?</p>
<div class="mt-4 flex justify-end space-x-3">
<button x-on:click="show = false" class="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md">Cancel</button>
<button x-on:click="show = false" class="px-4 py-2 text-sm text-white bg-indigo-600 rounded-md">Confirm</button>
</div>
</.basic>
<button x-on:click="$dispatch('open-modal', { id: 'confirm-modal' })">Open Modal</button>
Options
:id
- Unique identifier for the modal (required):title
- Modal dialog title (optional):show_close_button
- Whether to show the close button (optional, defaults to true):max_width
- Maximum width of the modal: "sm", "md", "lg", "xl", "2xl", "full" (optional, defaults to "lg"):class
- Additional CSS classes for the modal container (optional):header_class
- CSS classes for the modal header (optional):content_class
- CSS classes for the modal content area (optional):overlay_class
- CSS classes for the backdrop overlay (optional):focus_element
- ID of element to focus when modal opens (optional, defaults to first focusable element)
Renders a full screen modal that covers the entire viewport.
This component creates a modal that takes up the full screen when opened, with a header that contains the title and close button.
Examples
<.full_screen id="settings-modal" title="Application Settings">
<div class="h-full overflow-y-auto">
<p>Full screen modal content goes here.</p>
</div>
</.full_screen>
<button x-on:click="$dispatch('open-modal', { id: 'settings-modal' })">Settings</button>
Options
:id
- Unique identifier for the modal (required):title
- Modal dialog title (optional):show_close_button
- Whether to show the close button (optional, defaults to true):class
- Additional CSS classes for the modal container (optional):header_class
- CSS classes for the modal header (optional):content_class
- CSS classes for the modal content area (optional)
Renders a slide-over modal that appears from the side of the screen.
This component creates a modal that slides in from the specified side (right by default) and covers a portion of the screen.
Examples
<.side id="cart-modal" title="Shopping Cart">
<div class="h-full overflow-y-auto">
<p>Cart content goes here.</p>
</div>
</.side>
<button x-on:click="$dispatch('open-modal', { id: 'cart-modal' })">View Cart</button>
Options
:id
- Unique identifier for the modal (required):title
- Modal dialog title (optional):show_close_button
- Whether to show the close button (optional, defaults to true):side
- Which side the modal slides in from: "right" or "left" (optional, defaults to "right"):width
- Width of the slide-over panel: "sm", "md", "lg", "xl", "2xl", "full" (optional, defaults to "md"):class
- Additional CSS classes for the modal container (optional):header_class
- CSS classes for the modal header (optional):content_class
- CSS classes for the modal content area (optional):overlay_class
- CSS classes for the backdrop overlay (optional)