Phenix Storybook

Pick a theme

Displays Riders

Modal

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
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 an icon" icon="fas fa-bullhorn"
  close_modal_event={JS.push("psb-assign", value: %{show: false, variation_id: :with_sidebar})}
  with_sidebar={true}/>

<.modal_sidebar class="text-center">
  <p class="text-default-txt pb-24">
    Some sidebar content here
  </p>
  <.modal_sidebar_footer>
    <.button icon="fa fa-check" text="Valider" class="w-full"/>
  </.modal_sidebar_footer>
</.modal_sidebar>

<.modal_body class="text-center" with_sidebar={true}>
  <p class="text-default-txt">
    Some modal content here
  </p>
</.modal_body>