View Source Shino.UI.Dialog (shino v0.1.1-alpha.0)
Provides dialog related components.
Displays content underneath inert.
Related components
Availale components
Components are divided into two categories: control components and style components.
Control components:
<Dialog.root />
<Dialog.trigger />
<Dialog.content />
<Dialog.close />
<Dialog.default_close />
Style components:
<Dialog.header />
<Dialog.title />
<Dialog.description />
<Dialog.footer />
Opening and closing a sheet
For opening a sheet, you can use:
:default_open
attr of<Dialog.root />
component<Dialog.trigger />
component
For closing a sheet, you can use:
<Dialog.close />
component<Dialog.default_close />
component- the builtin user interactions:
- clicking outside of the dialog
- pressing ESC key
Examples
Use with a trigger:
<Dialog.root :let={root} id="profile-dialog">
<Dialog.trigger for={root}>
<.button>Open profile diaglog</.button>
</Dialog.trigger>
<Dialog.content for={root}>
<Dialog.header>
<Dialog.title>Edit profile</Dialog.title>
<Dialog.description>
Make changes to your profile here, and click save when you're done.
</Dialog.description>
</Dialog.header>
<div>
<% # ... %>
</div>
<Dialog.footer>
<.button type="submit">Save</.button>
</Dialog.footer>
</Dialog.content>
</Dialog.root>
Use with routing:
<Dialog.root
:if={@live_action in [:new, :edit]}
id="profile-dialog"
default_open={true}
on_cancel={JS.navigate(~p"/p")}
>
<Dialog.content>
<Dialog.header>
<Dialog.title>Edit profile</Dialog.title>
<Dialog.description>
Make changes to your profile here, and click save when you're done.
</Dialog.description>
</Dialog.header>
<div>
<% # ... %>
</div>
<Dialog.footer>
<.button type="submit">Save</.button>
</Dialog.footer>
</Dialog.content>
</Dialog.root>
References
Summary
Functions
Renders a dialog close.
Renders a dialog content.
Renders a default close for dialog.
Renders a dialog description.
Renders a dialog footer.
Renders a dialog header.
The root contains all the parts of a dialog.
Renders a dialog title.
Renders a sheet trigger.
Functions
Renders a dialog close.
Attributes
for
(Shino.UI.Dialog.Root
) (required)class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a dialog content.
Attributes
for
(Shino.UI.Dialog.Root
) (required)class
(:string
) - Defaults tonil
.
Slots
inner_block
(required)
Renders a default close for dialog.
As its name implied, it's a default component, so it doesn't accept any kind of customization.
Attributes
for
(Shino.UI.Dialog.Root
) (required)
Renders a dialog description.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a dialog header.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The root contains all the parts of a dialog.
Attributes
id
(:string
) (required)default_open
(:boolean
) - Defaults tofalse
.on_cancel
(Phoenix.LiveView.JS
) - Defaults to%Phoenix.LiveView.JS{ops: []}
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a dialog title.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet trigger.
Attributes
for
(Shino.UI.Dialog.Root
) (required)class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)