GroupCollect 1.3.252
- 1.1.0

Modal

Renders a modal.

Read more Read less

Examples

<.modal id="confirm-modal" title="My Title" action_title="My Action" on_action={JS.push("submit")}>
  This is a modal.
</.modal>
Attribute Type Documentation Default Value
Required id * :string
Required title * :string
action_title :string
action_disabled :boolean false
action_disable_with :any
class :any []
destructive :boolean false
hide_cancel :boolean false
hide_footer :boolean false
scrollable :boolean

Caps the modal at 462px tall (572px on mobile), and lower when the viewport

 Read more Read less
false

is shorter. Longer content scrolls between the title and the actions, and the content is a tab stop so it can be scrolled from the keyboard.
show :boolean false
on_action %JS{} %Phoenix.LiveView.JS{ops: []}
on_cancel %JS{} %Phoenix.LiveView.JS{ops: []}
accept_push_events :boolean

Attach listeners for server events.

 Read more Read less
false
Required inner_block * :slot 
<div data-test-id="modal-content">
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
  <p>Multiple paragraphs for content that scrolls</p>
</div>
description :slot
actions :slot