svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dialog: handle overflow scrolling

Browse Source
This commit is contained in:
Elijah Duffy
2025-12-09 16:18:02 -08:00
parent 0bbf96585a
commit 08cde9c3ee
2 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/Dialog.svelte
View File

@@ -145,7 +145,8 @@
{#snippet dialog()}
<div
class={[
'fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm',
'fixed inset-0 z-50 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
'overflow-auto p-8',
classValue
]}
transition:fade={{ duration: 150 }}
@@ -165,7 +166,7 @@
<div
bind:this={dialogContainer}
class={[
'relative max-h-[85vh] w-[90vw] rounded-xl bg-white p-6 shadow-lg',
'relative w-[90vw] rounded-xl bg-white p-6 shadow-lg',
size === 'sm' && 'max-w-[450px]',
size === 'md' && 'max-w-[650px]',
size === 'lg' && 'max-w-[850px]',

37
src/routes/+page.svelte
View File

@@ -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';