Examples

Examples for some of the common use-cases that you might need. Because of thebare-bones take this library takes, you can obviously come up with better solutions.

Information dialog

A simple information dialog. You can style the component however you like. This example uses some default PicoCSS styles.

<script lang="ts">
	import type { Dialog } from 'svelte-component-dialogs';

	export let dialogRef: Dialog;
</script>

<article>
	<header>
		<button
			type="button"
			class="close"
			aria-label="Close"
			title="Close"
			on:click={() => dialogRef.close()}
		/>
		<h4>Very important information!</h4>
	</header>
	<p>You should really know about this.</p>
	<footer>
		<button
			type="button"
			class="secondary"
			style="margin-left: auto;"
			on:click={() => dialogRef.close()}>OK</button
		>
	</footer>
</article>

Confirmation dialog

A confirmation dialog. You can set onClose either inside the component by using dialogRef or outside with the reference returned by openDialog. This example uses the second method. You should also set closeOnEsc and closeOnBackdropClick to false for the best results.

<script lang="ts">
	import type { Dialog } from 'svelte-component-dialogs';

	export let dialogRef: Dialog;

	const confirm = () => dialogRef.close(true);
	const cancel = () => dialogRef.close(false);
</script>

<article>
	<header>
		<h4>Are you sure?</h4>
	</header>
	<p>This cannot be changed later.</p>
	<footer>
		<button type="button" class="secondary" on:click={cancel}>No</button>
		<button type="button" on:click={confirm}>Yes</button>
	</footer>
</article>

Scrolled content

Since you are in control of the dialog content, you just have to set your wrapper to have a max height. Set disableScroll to true in order to disable the background scrolling by accident.

<script lang="ts">
    import type { Dialog } from 'svelte-component-dialogs';

    export let dialogRef: Dialog;
</script>

<article>
    <header>
        <button
            type="button"
            class="close"
            aria-label="Close"
            title="Close"
            on:click={() => dialogRef.close()}
        />
        <h4>Scrolled content</h4>
    </header>
    <p>
        Long content
    </p>
</article>

<style>
    article {
        max-height: 600px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    p {
        max-height: 100%;
        overflow: auto;
    }
</style>

Form content

You can return anything as a result when closing a dialog, for example the result of a form.

<script lang="ts">
	import type { Dialog } from 'svelte-component-dialogs';

	export let dialogRef: Dialog;
	export let form: HTMLFormElement;

	const saveEntity = (event: SubmitEvent) => {
		event.preventDefault();
		const formData = new FormData(form);
		dialogRef.close({ data: Object.fromEntries(formData.entries()) });
	};
</script>

<article>
	<header>
		<button
			type="button"
			class="close"
			aria-label="Close"
			title="Close"
			on:click={() => dialogRef.close()}
		/>
		<h4>Create Entity</h4>
	</header>
	<form id="form" bind:this={form} on:submit={(event) => saveEntity(event)}>
		<label for="name">
			Name
			<input type="text" id="name" name="name" placeholder="Name" required />
		</label>
		<label for="email">
			Email
			<input type="email" id="email" name="email" placeholder="Email" required />
		</label>
	</form>
	<footer>
		<button type="button" class="secondary" on:click={() => dialogRef.close()}>Cancel</button>
		<button type="submit" form="form">Save</button>
	</footer>
</article>