The
Dialog
component uses the built-in
<dialog/>
element. It takes
advantage of the fact that a
<form method='dialog'/>
element
closes its parent dialog element when the form is submitted. This
allows you to retrieve user-submitted values in response to the
close
event. For example,
you may use the
value
attribute of
<button/>
elements
to submit
values to the dialog.
<script>
import { Dialog } from '@kwangure/strawberry/default/dialog';
let value = '?';
/** @type {() => any} */
let showModal;
/** @param {CustomEvent} event */
function handleClose(event) {
value = event.detail.returnValue;
}
</script>
The best framework is: {value} <br>
<Dialog bind:showModal on:close={handleClose}>
<button value='svelte'>Svelte</button>
</Dialog>
<button on:click={showModal}>Show modal</button>
Non-modal dialogs allow users to interact with other sections of the page while
the dialog is open, by hiding the backdrop. Use Svelte's
bind:
directive to get
the
showModal()
and
show()
methods
which open the
<dialog/>
element in modal
and non-modal modes respectively.
<script>
import { Dialog } from '@kwangure/strawberry/default/dialog';
/** @type {() => any} */
let show;
/** @type {() => any} */
let showModal;
</script>
<Dialog bind:show bind:showModal>
Nice to meet you
<div>
<button>Bye!</button>
</div>
</Dialog>
<button on:click={show}>Show</button>
<button on:click={showModal}>Show modal</button>
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 {() => any} */
let showModal;
/** @type {string[]} */
let paragraphs = [];
const url = 'https://baconipsum.com/api/?type=all-meat¶s=4';
(async () => {
paragraphs = await fetch(url)
.then((response) => response.json());
})();
</script>
<Dialog bind:showModal>
<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>Cancel</button>
<button class='br-button-primary'>Lorem</button>
</footer>
</article>
</Dialog>
<button on:click={showModal}>Show modal</button>
<style>
article {
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
</style>