Dialog

Dialog presents a dialog box or modal.

Examples

Basic usage

Non-modal dialogs allow users to interact with other sections of the page while the dialog is open, by hiding the backdrop. Use 'modal' or 'non-modal' to open the form in your desired mode. Pass false to close the dialog.

<script>
	import { Dialog } from '@kwangure/strawberry/default/dialog';

	/** @type {false | 'modal' | 'non-modal'} */
	let open;
</script>

<Dialog bind:open>
	Nice to meet you
	<button on:click={() => open = false}>👋 Bye!</button>
</Dialog>

<button on:click={() => open = 'modal'}>Show</button>
<button on:click={() => open = 'non-modal'}>Show modal</button>

Directional container

Add the .br-dialog-inline-section class to presentational section to layout the content in the inline direction (left to right) and .br-dialog-block-section to layout the content in the block direction. The block container adds a scrollbar when the content overflows the container.

<script>
	import { Dialog } from '@kwangure/strawberry/default/dialog';

	/** @type {false | 'modal'} */
	let open;

	/** @type {string[]} */
	let paragraphs = [];

	const url = 'https://baconipsum.com/api/?type=all-meat&paras=4';
	(async () => {
		paragraphs = await fetch(url)
			.then((response) => response.json());
	})();
</script>

<Dialog bind:open>
	<article>
		<header class="br-dialog-inline-section">
			<h3>Dialog title</h3>
		</header>
		<section class="br-dialog-block-section">
			{#each paragraphs as paragraph}
				<p>{paragraph}</p>
			{/each}
		</section>
		<footer class="br-dialog-inline-section">
			<button on:click={() => open = false}>
				Cancel
			</button>
			<button class='br-button-primary' on:click={() => open = false}>
				Lorem
			</button>
		</footer>
	</article>
</Dialog>

<button on:click={() => open = 'modal'}>Show modal</button>

<style>
	article {
		height: 100%;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
</style>