Phoenix Duskmoon UI Storybook

Modal

Attribute Type Documentation Default Value
id :any

Modal id
class :any

Modal class
""
hide_close :boolean

Hide top right close button
false
position :string

Modal position (top, middle, bottom)
backdrop :boolean

Apply backdrop blur effect
false
size :string

Modal size (tiny, small, medium, large, huge)
responsive :boolean

Make modal responsive
false
trigger :slot

Modal trigger

 
<:trigger :let={f}>
  <button class="btn btn-accent" onclick={"document.getElementById('#{f}').showModal()"}>Open</button>
</:trigger>
title :slot

Modal title
Show slot attributes Hide slot attributes
class :any

html class
Required body * :slot

Modal content

 
<:body class="flex justify-center items-center text-4xl text-rose-600">
  <form method="dialog">
    <button>PhoenixDuskmoonb Is Awesome...</button>
  </form>
</:body>
footer :slot

Modal footer, buttons
Show slot attributes Hide slot attributes