GroupCollect 1.3.215
- 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 :string
class :any []
destructive :boolean false
hide_cancel :boolean false
hide_footer :boolean false
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 
<.simple_form for={%{id: "trip"}} actions_layout="cluster" data-test-id="modal-content">
  <.input
    id="modal-dropdown-country"
    type="dropdown"
    name="trip[country]"
    label="Country"
    placeholder="Select..."
    value={nil}
    options={[
      %{label: "Argentina", value: "argentina"},
      %{label: "Brazil", value: "brazil"},
      %{label: "Canada", value: "canada"},
      %{label: "Denmark", value: "denmark"},
      %{label: "Ecuador", value: "ecuador"},
      %{label: "France", value: "france"},
      %{label: "Germany", value: "germany"},
      %{label: "Hungary", value: "hungary"},
      %{label: "India", value: "india"},
      %{label: "Japan", value: "japan"}
    ]}
  />
  <.input name="trip[name]" value="" label="Trip name" />
  <.input name="trip[email]" value="" label="Contact email" />
  <.input name="trip[phone]" value="" label="Phone" />
  <.input name="trip[street]" value="" label="Street" />
  <.input name="trip[city]" value="" label="City" />
  <.input name="trip[zip]" value="" label="Zip" />
  <.input
    id="modal-dropdown-language"
    type="dropdown"
    name="trip[language]"
    label="Language"
    placeholder="Select..."
    value={nil}
    options={[
      %{label: "English", value: "english"},
      %{label: "French", value: "french"},
      %{label: "German", value: "german"},
      %{label: "Japanese", value: "japanese"},
      %{label: "Portuguese", value: "portuguese"},
      %{label: "Spanish", value: "spanish"}
    ]}
  />
</.simple_form>
description :slot
actions :slot