Phoenix Duskmoon UI Storybook

Modal

PhoenixDuskmoon
PhoenixDuskmoon Storybook
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-primary" onclick={"document.getElementById('#{f}').showModal()"}>Open</button>
</:trigger>
title :slot

Modal title
Show slot attributes Hide slot attributes
class :any

html class

 
<:title>PhoenixDuskmoon</:title>
Required body * :slot

Modal content

 
<:body>PhoenixDuskmoon Storybook</:body>
footer :slot

Modal footer, buttons
Show slot attributes Hide slot attributes