Sheet
A panel that slides in from the edge of the screen.
<script lang="ts">
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription,
SheetFooter,
SheetClose
} from "$lib/components/ui/sheet";
import { Button } from "$lib/components/ui/button";
</script>
<Sheet>
<SheetTrigger>
{#snippet child({ props })}
<Button variant="ghost" {...props}>Open sheet</Button>
{/snippet}
</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription
>Make changes to your profile, then save.</SheetDescription
>
</SheetHeader>
<SheetFooter>
<SheetClose>
{#snippet child({ props })}
<Button {...props}>Save changes</Button>
{/snippet}
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the sheet source from the registry into $lib/components/ui/sheet.
Usage
<script lang="ts">
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription
} from '$lib/components/ui/sheet';
import { Button } from '$lib/components/ui/button';
</script>
<Sheet>
<SheetTrigger>
{#snippet child({ props })}
<Button {...props}>Open</Button>
{/snippet}
</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>Make changes here.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>side can be "top", "right" (default), "bottom", or "left".