|
|
|
|
@@ -53,6 +53,7 @@
|
|
|
|
|
let dateInputValue = $state<CalendarDate | undefined>(undefined);
|
|
|
|
|
let checkboxValue = $state<CheckboxState>('indeterminate');
|
|
|
|
|
let dialogOpen = $state(false);
|
|
|
|
|
let scrollableDialogOpen = $state(true);
|
|
|
|
|
let toggleOptions: Option[] = $state([
|
|
|
|
|
'item one',
|
|
|
|
|
'item two',
|
|
|
|
|
@@ -92,6 +93,7 @@
|
|
|
|
|
<Link href="https://svelte.dev">Visit Svelte</Link>
|
|
|
|
|
|
|
|
|
|
<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>
|
|
|
|
|
<Button onclick={() => (scrollableDialogOpen = true)}>Open Scrollable Dialog</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -459,6 +461,7 @@
|
|
|
|
|
{/snippet}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Regular Dialog Demo -->
|
|
|
|
|
<Dialog
|
|
|
|
|
bind:open={dialogOpen}
|
|
|
|
|
title="Dialog Title"
|
|
|
|
|
@@ -482,6 +485,40 @@
|
|
|
|
|
<p>This is a dialog content area.</p>
|
|
|
|
|
</Dialog>
|
|
|
|
|
|
|
|
|
|
<!-- Scrollable Dialog Demo -->
|
|
|
|
|
<Dialog bind:open={scrollableDialogOpen} title="Scrollable Dialog" size="sm">
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
<p>
|
|
|
|
|
Ullamco nulla sunt laboris esse commodo irure id pariatur est irure eiusmod. Cupidatat Lorem
|
|
|
|
|
ad deserunt non culpa aliqua qui qui ut reprehenderit minim consequat amet. Qui elit ipsum
|
|
|
|
|
dolor enim laboris. Exercitation sint esse dolore enim irure veniam esse incididunt fugiat.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
In elit tempor quis enim id fugiat cillum consectetur minim sint ex. Minim reprehenderit culpa
|
|
|
|
|
sunt in reprehenderit. Amet in minim in nulla officia fugiat laborum velit dolor laborum
|
|
|
|
|
deserunt aliqua nostrud.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Ad dolor ad nisi est fugiat anim aute amet. Fugiat excepteur proident incididunt anim sunt.
|
|
|
|
|
Proident quis dolor ea voluptate esse commodo voluptate quis culpa cupidatat excepteur.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Cillum ut laboris laboris ea ex ex. Aliquip magna irure eiusmod qui eiusmod. Mollit id et
|
|
|
|
|
incididunt sint mollit anim cillum reprehenderit exercitation labore incididunt culpa. Officia
|
|
|
|
|
et ad occaecat quis ipsum. Culpa quis cupidatat reprehenderit reprehenderit incididunt
|
|
|
|
|
excepteur quis minim. Laboris cupidatat laborum est ipsum esse sint aliqua cillum laborum est
|
|
|
|
|
cillum dolore cupidatat pariatur. Dolor ipsum cillum enim esse consectetur dolor sunt magna.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Eu cillum reprehenderit Lorem duis sunt. Mollit laborum tempor magna dolor ad ipsum do fugiat
|
|
|
|
|
nisi quis culpa tempor veniam officia. Voluptate irure labore aliqua elit officia nulla dolor.
|
|
|
|
|
Lorem duis ea ea commodo deserunt minim enim. Excepteur non magna cupidatat ea eiusmod dolore
|
|
|
|
|
elit dolor veniam cupidatat. Amet voluptate culpa ut ex consequat culpa cillum. Exercitation
|
|
|
|
|
ex voluptate incididunt laboris qui sint id quis in aliqua excepteur incididunt.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</Dialog>
|
|
|
|
|
|
|
|
|
|
<style lang="postcss">
|
|
|
|
|
@reference '$lib/styles/tailwind.css';
|
|
|
|
|
|
|
|
|
|
|
