Last active
March 26, 2024 11:01
-
-
Save frippz/7bf61d50c708ad154052899d539a606a to your computer and use it in GitHub Desktop.
Native HTML dialog element in Svelte
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
export let dialog | |
</script> | |
<dialog bind:this={dialog} on:close> | |
<slot/> | |
</dialog> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import Dialog from './Dialog.svelte' | |
let dialog | |
</script> | |
<button on:click={() => dialog.showModal()}>Open modal</button> | |
<Dialog bind:dialog on:close={() => console.log('Modal closed')}> | |
<p>I love how easy this is! 😍</p> | |
</Dialog> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Found originally on DEV community and copied here because I can’t stand that website’s dick bars. 😜