PineUiPhoenix.Modal (Pine UI v0.1.3)

View Source

Provides modal dialog components for displaying content that requires user attention.

The Modal module offers different variants:

  • basic/1 - Standard modal dialog with customizable size
  • full_screen/1 - Full screen modal that covers the entire viewport
  • side/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

basic(assigns)

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)

full_screen(assigns)

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)

side(assigns)

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)