lomer-ui

Component

Drawer

Slide-out panel for navigation or content.

Installation

Usage

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Drawer from '$lib/components/base/drawer.svelte';
3 
  import Button from '$lib/components/base/button.svelte';
4
5 
  let open = $state(false);
6 
</script>
7
8 
<Button onclick={() => (open = true)}>Open drawer</Button>
9 
<Drawer class="w-96" title="Title here" bind:open>
10 
  <p>Content here...</p>
11 
</Drawer>
12

Left drawer

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Drawer from '$lib/components/base/drawer.svelte';
3 
  import Button from '$lib/components/base/button.svelte';
4
5 
  let open = $state(false);
6 
</script>
7
8 
<Button onclick={() => (open = true)}>Open drawer</Button>
9 
<Drawer class="w-96" title="Title here" placement="left" bind:open>
10 
  <p>Content here...</p>
11 
</Drawer>
12