Dialog

A window overlaid on the rest of the page.

Transitions

You can change the transitions of the dialog overlay and container opening and closing by using the overlayTransition and containerTransition props and passing it an object with a Svelte transition function along with the options that should be passed to it.

<script lang="ts">
    import { writable } from 'svelte/store';
    import { slide } from 'svelte/transition';
    import { Dialog, type DialogTransition } from 'ato-ui';
 
    let open = writable(false);
    let containerTransition: DialogTransition = {
        trans: slide,
        options: { duration: 200 }
    };
</script>
 
<Dialog {open} {containerTransition}>
    <!-- Content -->
</Dialog>

API

Props

Dialog

   
open
:
  Writable<boolean>
A writable store that controls whether or not the dialog is open.

role

'dialog'

The role attribute of the dialog element. An alert dialog should be used to display content that is critical to the user's workflow, whereas a dialog should be used to display content that isn't critical to the user's workflow.

closeOnOutsideClick

boolean

true

Whether or not to close the dialog when the user clicks outside of it.

preventScroll

boolean

true

Whether or not to prevent scrolling of the document when the dialog is open.

defaultOpen

boolean

false

Whether the dialog is open by default or not.

overlayTransition

{ trans: fade, options: { duration: 150 } }

Set the overlay transition.

containerTransition

{ trans: fade, options: { duration: 150 } }

Set the dialog container transition.

center

boolean

true

Center modal.

position

string

'left-0 top-0'

Set the position of the modal. This only has effect if the center prop is set to false.

zIndex

string

'z-50'

Set the z-index.

overlayStyle

string

'bg-surface-800/40-300/40 backdrop-blur-sm'

Set overlay style.

containerStyle

string

'surface-50 dark:surface-700 p-4 shadow-md'

Set the container style.