Drawer

The Drawer component is a versatile UI element that slides in from the edge of the screen, providing a convenient way to display additional content or navigation without disrupting the main view.

Example

Import the Drawer component first to use it in your application. Here’s a basic example demonstrating how to use the Drawer component:

Svelte 
<script>
  import { Drawer } from "theui-svelte";
</script>

<Drawer label="Open Drawer">
  <div class="p-8">
    Drawer content
  </div>
</Drawer>

In this example, the Drawer slides in from the left side of the screen which is the default behavior. The trigger snippet contains a button that toggles the visibility of the Drawer. You can replace the content inside the Drawer with any elements you need.

Drawer Position

The position prop allows you to control where the Drawer appears on the screen. You can choose from four positions: top, end, bottom, or start. This flexibility lets you tailor the Drawer’s placement to fit the layout and design of your application.

Simply set the position prop to your desired value to change where the Drawer opens from, creating a more intuitive user experience based on your app's needs.

Svelte 
<Drawer ... position="start">...</Drawer> <!-- Default position -->
<Drawer ... position="top">...</Drawer>
<Drawer ... position="end">...</Drawer>
<Drawer ... position="bottom">...</Drawer>

Controlling the Backdrop

Custom Backdrop Style

The Drawer includes a backdrop which is enabled by default. It can be toggled or styled using the backdrop prop. Set it to false to disable it, true for a default backdrop or provide a custom classes for styling.

Svelte 
<Drawer ... backdrop="bg-red-500">...</Drawer>

Preventing Backdrop Click

By default, the Drawer closes when the user clicks on the backdrop. This behavior helps users easily dismiss the Drawer by clicking outside of it, enhancing usability in most scenarios.

However, for critical tasks, you can prevent this by setting the staticBackdrop prop to true, ensuring the Drawer stays open until manually closed.

Svelte 
<Drawer ... staticBackdrop={true}>...</Drawer>

Disable Backdrop

If you prefer not to use a backdrop, you can easily disable it by setting the backdrop prop to false. This will remove the backdrop entirely from the Drawer component

Svelte 
<Drawer ... backdrop={false}>...</Drawer>

Configuration