BwDrawer | bw-drawer

Overview

The drawer component is a modal that slides in from the side of the screen.

Usage

Sides

Open Drawer Left

Drawer Title

Drawer content

OkOpen Drawer Right

Drawer Title

Drawer content

Ok

<div style="display: flex; gap: 8px; padding-bottom: 4px; align-items: center;">
  <bw-drawer side="left">
    <bw-button slot="trigger">Open Drawer Left</bw-button>
    <bw-toolbar slot="header">
      <h2>Drawer Title</h2>
    </bw-toolbar>
    <div slot="content">
      <p>Drawer content</p>
    </div>
    <bw-toolbar slot="footer">
      <bw-button slot="end">Ok</bw-button>
    </bw-toolbar>
  </bw-drawer>
  <bw-drawer side="right">
    <bw-button slot="trigger">Open Drawer Right</bw-button>
    <bw-toolbar slot="header">
      <h2>Drawer Title</h2>
    </bw-toolbar>
    <div slot="content">
      <p>Drawer content</p>
    </div>
    <bw-toolbar slot="footer">
      <bw-button slot="end">Ok</bw-button>
    </bw-toolbar>
  </bw-drawer>
</div>

Properties

Property	Attribute	Description	Type	Default
backdropDismiss	backdrop-dismiss	Backdrop will dismiss the drawer on click when enabled	boolean	true
destroy	destroy	Execute a promise after the drawer has dismissed	() => void | Promise<void>	undefined
init	init	Execute a promise before the drawer starts presenting	() => void | Promise<void>	undefined
open	open	Opens and closes the drawer	boolean	false
side	side	Where the drawer will appear on the screen	"left" | "right"	'left'

Events

Event	Description	Type
drawerDismiss	Emitted when the drawer is dismissed	CustomEvent<{ role?: string; data?: any; }>
drawerPresent	Emitted when the drawer is presented	CustomEvent<any>
ready	Emitted when the component has completed it's first render	CustomEvent<any>

Methods

dismiss(role?: string, data?: any) => Promise<void>

Dismisses the drawer

Parameters

Name	Type	Description
role	string	- The role of the dismiss
data	any	- The data of the dismiss

Returns

Type: Promise<void>

present() => Promise<void>

Presents the drawer

Returns

Type: Promise<void>

Slots

Slot	Description
"content"	The content of the drawer
"footer"	The footer of the drawer
"header"	The header of the drawer
"trigger"	The trigger element of the drawer

Shadow Parts

Part	Description
"dialog"	The dialog element
"inner-container"	The inner container of the drawer

CSS Custom Properties

Name	Description
--background	The background color of the drawer
--color	The color of the drawer
--width	The width of the drawer

---

© 2025 United Systems & Software - All Rights Reserved.