Noora.Modal (noora v0.1.0-rc.2)
Renders a modal component with customizable headers, content, and footers, supporting various header types, sizes, and event handling.
Example
<.modal id="user-profile-modal" title="Edit Profile" description="Update your personal information">
<:trigger>
<.button>Open Modal</.button>
</:trigger>
<:header_button>
<.button on_click="save-profile">Save</.button>
</:header_button>
<form id="profile-form">
<.input name="name" label="Name" />
<.input name="email" label="Email" type="email" />
</form>
<:footer>
<.modal_footer>
<:action>
<.button variant="ghost">Cancel</.button>
<.button variant="primary">Save Changes</.button>
</:action>
</.modal_footer>
</:footer>
</.modal>
Summary
Functions
Attributes
id
(:string
) (required) - The modal's unique identifier.title
(:string
) - Title of the modal. Defaults tonil
.description
(:string
) - Description of the modal. Only visible when header_size is 'large'. Defaults tonil
.header_type
(:string
) - Type of the header. Defaults to"default"
. Must be one of"default"
,"icon"
,"success"
,"info"
,"warning"
, or"error"
.header_size
(:string
) - Size of the header. Defaults to"large"
. Must be one of"small"
, or"large"
.on_dismiss
(:string
) - Event to emit when the dismiss icon is clicked. Defaults tonil
.on_open_change
(:string
) - An optional event to fire when the modal is opened or closed. Defaults tonil
.
Slots
trigger
(required) - The modal's trigger. Should be a button that accepts the attributes provided by the slot.header_icon
- Icon to be rendered in the header when type is 'icon'.header_button
footer
- The modal's footer element.inner_block