Phenix Storybook

Modal

See PhenixStorybook.Components.Modal.ModalHeader on how to configure target.

Attribute Type Documentation Default Value
id :string

Modal id
class :string

Extends the modal class
container_class :string

Extends the container modal class
with_sidebar :boolean

The modal has a sidebar
full_screen :boolean

The modal is extended to the (almost) full screen
false
phx-target :string

Phx target of the modal
overlay_close :boolean

When true, a click on the surrounding overlay will close the modal
true
close_modal_event :any

Event to be triggered when closing the modal
"close_modal"
show :boolean

manages the modal visibility state
false
inner_block :slot

Modal content

 
<.modal_header title="Fancy title with icon" icon="fas fa-bullhorn" full_screen={true}
  close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :full_screen_modal})}
/>
<.modal_body class="text-center" full_screen={true}>
  <p class="text-default-txt">
    Some modal content here
  </p>
</.modal_body>
<.modal_footer full_screen={true}>
  <.button text="Valider"/>
</.modal_footer>