Guillotine.Dialog (guillotine v0.3.0)

A dialog component.

Example

<.dialog>
  <.dialog_trigger class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
    Open dialog
  </.dialog_trigger>
  <.dialog_backdrop class="absolute inset-0 w-full h-full bg-gray-200"></.dialog_backdrop>
  <.dialog_positioner class="fixed inset-0 z-10 w-screen overflow-y-auto flex min-h-full items-center justify-center p-4">
    <.dialog_content class="w-full max-w-md rounded-xl bg-white p-6 outline-0">
      <.dialog_title class="text-base font-medium">Dialog</.dialog_title>
      <.dialog_description class="mt-2 text-sm">Welcome to Guillotine!</.dialog_description>
      <div class="mt-4">
        <.dialog_close_trigger class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
          Close
        </.dialog_close_trigger>
      </div>
    </.dialog_content>
  </.dialog_positioner>
</.dialog>

Summary

Functions

Attributes

  • id (:string) - ID.
  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Attributes

  • as (:any) - Tag or component to render as. Defaults to "button".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "span".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "h2".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Attributes

  • as (:any) - Tag or component to render as. Defaults to "button".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block

Functions

Link to this function

dialog(assigns)

Attributes

  • id (:string) - ID.
  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block
Link to this function

dialog_backdrop(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.
Link to this function

dialog_close_trigger(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "button".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block
Link to this function

dialog_content(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block
Link to this function

dialog_description(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "span".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block
Link to this function

dialog_positioner(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "div".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block
Link to this function

dialog_title(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "h2".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block
Link to this function

dialog_trigger(assigns)

Attributes

  • as (:any) - Tag or component to render as. Defaults to "button".
  • Global attributes are accepted. Additional attributes.

Slots

  • inner_block