Dialog

A dialog (or modal) is a window overlaid on the primary window.

<Overlay.dialog :let={api}>
  <button
    class={[
      "block px-3 py-2 text-center text-sm text-slate-700 font-medium rounded-md",
      "bg-white hover:bg-gray-100 focus-visible:ring-2 focus:outline-none"
    ]}
    {api.trigger_attrs}
  >
    Open modal
  </button>

  <div class="relative" {api.container_attrs}>
    <div
      class="fixed inset-0 bg-black/40 z-[70]"
      data-transition
      data-enter="ease-in-out duration-200"
      data-enter-from="opacity-0"
      data-enter-to="opacity-100"
      data-leave="ease-in-out duration-200"
      data-leave-from="opacity-100"
      data-leave-to="opacity-0"
      {api.backdrop_attrs}
    >
    </div>

    <div class="fixed inset-0 overflow-y-auto z-[90]">
      <div class="flex min-h-full items-center justify-center p-4 text-center">
        <div
          class="z-[100] w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-lg"
          data-transition
          data-enter="ease-in-out duration-300"
          data-enter-from="opacity-0 scale-50"
          data-enter-to="opacity-100 scale-100"
          data-leave="ease-in-out duration-200"
          data-leave-from="opacity-100 scale-100"
          data-leave-to="opacity-0 scale-50"
          data-leave-ended="opacity-0"
          {api.panel_attrs}
        >
          <h3 class="text-lg font-medium leading-6 text-gray-900" {api.title_attrs}>
            Dialog
          </h3>
          <div class="mt-2">
            <p class="text-slate-700" {api.description_attrs}>
              Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
            </p>
          </div>
          <div class="mt-4">
            <button
              class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
              {api.close_button_attrs}
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</Overlay.dialog>

Setup

To use the dialog component, you’ll have to import Dialog module in your assets/app.js.

import { createSproutConfig, Dialog } from "sprout-ui";

const { initComponents, handleDomChange } = createSproutConfig({
  components: [Dialog()],
});

Anatomy

<sp-dialog data-state="open | closed">
  <div data-part="trigger"></div>
  <div data-part="container">
    <div data-part="backdrop"></div>
    <div data-part="panel">
      <h2 data-part="title"></h2>
      <p data-part="description"></p>
      <button data-part="close-button"></button>
    </div>
  </div>
</sp-dialog>

trigger: the trigger for the dialog
container: the container for backdrop and panel
backdrop: optional backdrop for the dialog
panel: the panel for dialog content
title: the title for the dialog
description: the description for the dialog
close-button: optional close button for the dialog content

Under the hood, all the slot contents are rendered inside a sp-dialog custom element.

Attributes

Attribute	Type	Description
`prevent_scroll`	`:bollean`	Whether to disable page scrolling when the dialog is opened, default to `true`
`close_on_esc`	`:boolean`	Whether to close the dialog when `Escape` pressed, default to `true`
`close_on_click_away`	`:boolean`	Whether to close the dialog when clicking outside it, default to `true`
`on_open`	`JS`	JS commands executed when the dialog is opened
`on_close`	`JS`	JS commands executed when the dialog is closed
`rest`	`:global`	Global attributes to be passed to the `sp-dialog` element

API

API	Description
`trigger_attrs`	Attributes to be passed to the trigger part
`container_attrs`	Attributes to be passed to the container part
`panel_attrs`	Attributes to be passed to the panel part
`title_attrs`	Attributes to be passed to the title part
`description_attrs`	Attributes to be passed to the description part
`close_button_attrs`	Attributes to be passed to the close-button part
`open_dialog_js`	JS commands to open the dialog
`close_popover_js`	JS commands to close the dialog

Transition

The backdrop and panel element can have transitions when the dialog is showing or hiding. Check out the guide on Transition.