View Source Shino.UI.Dialog (shino v0.1.0-alpha.0)

Provides dialog related components.

Displays content underneath inert.

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 to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a dialog content.

Attributes

  • for (Shino.UI.Dialog.Root) (required)
  • class (:string) - Defaults to nil.

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 to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a dialog footer.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a dialog header.

Attributes

  • class (:string) - Defaults to nil.
  • 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 to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a dialog title.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sheet trigger.

Attributes

  • for (Shino.UI.Dialog.Root) (required)
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)