UI Elements

Drawer

Display a content that slides in from the side of the screen.

Hello!!

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<div class="whole" {id} {...attributes} bind:this={element}>
  {children}
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface DrawerProps {
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false)
  position?: Position; // ("left")
  size?: string; // ("auto")
  duration?: number; // (200)
  closable?: boolean; // (true)
  id?: string;
  attributes?: HTMLAttributes<HTMLDivElement>;
  element?: HTMLDivElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • open - Indicates whether the Drawer is open or closed
  • position - Specifies where to display the Drawer
  • size - Specifies a valid CSS value for the width or height of the Drawer
  • duration - Animation duration in milliseconds
  • closable - Whether light dismiss is enabled

If size is omitted, auto is used. It’s recommended to specify the size explicitly, since the CSS property interpolate-size: allow-keywords;, which is not yet supported by some browsers, is applied when using auto.

Styling

In this component, margin and padding cannot be used for the whole part. To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-drawer

Exports

Types

TypeScript
type Position = "top" | "right" | "bottom" | "left";
type DrawerReqdProps = "children";
type DrawerBindProps = "open" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Hello!!

With Interactive Variant

Preset for Demo
Enter variant as you like
Drawer Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.