Dialog

Displays a focused interface for user interaction.

/// DEMO ///

///

<script>
    import Dialog from '$lib/components/base/dialog.svelte';
    let open = $state(false);
</script>

<button onclick={() => (open = true)}>Open dialog here</button>
<Dialog title="Title here" bind:open>Content here...</Dialog>


Guide

1. Create escape key action to close the dialog by pressing escape key.

2. Create focus trap action to trap the focus inside dialog component.

3. Create dialog component.

Skip this guide.

Quickly try this on your project.

npx lomer-ui get dialog

Share treats:

`1`	`<script>`
`2`	`import Dialog from '$lib/components/base/dialog.svelte';`
`3`	`let open = $state(false);`
`4`	`</script>`
`5`
`6`	`<button onclick={() => (open = true)}>Open dialog here</button>`
`7`	`<Dialog title="Title here" bind:open>Content here...</Dialog>`
`8`