The drawer component is used to provide a hidden off-screen section that can be revealed by the user. It is commonly used to provide additional navigation or content that is not immediately necessary, but can be easily accessed when needed. The content of a drawer should be clearly organized and labeled, and should be related to the main content of the page.
Example
open drawerThis is a drawer
code
<bp-button popovertarget="drawer-example" action="secondary">open drawer</bp-button>
<bp-drawer id="drawer-example" closable>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
</script>
Right
code
<bp-button popovertarget="right-drawer" action="secondary">right</bp-button>
<bp-drawer id="right-drawer" position="right" closable>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
</script>
Left
code
<bp-button popovertarget="left-drawer" action="secondary">left</bp-button>
<bp-drawer id="left-drawer" position="left" closable>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
</script>
Install
NPM
import '@blueprintui/components/include/drawer.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/drawer.js/+esm';
</script>
Accessibility
- Use a button or link to open and close the drawer, rather than relying on hover or swipe gestures.
bp-drawer
Events
Name | Types | Description |
---|
open |
| dispatched when the drawer is opened |
close |
| dispatched when the drawer is closed |
Properties
Name | Types | Description |
---|
accessor |
| set default aria/i18n strings |
closable | boolean | |
trigger | HTMLElement | string | |
position | 'left' | 'right' | |
i18n |
| |
Attributes
Name | Types | Description |
---|
accessor |
| set default aria/i18n strings |
CSS Properties
Name | Types | Description |
---|
--background |
| |
--padding |
| |
--width |
| |
--height |
| |
--overflow |
| |
Slots
Name | Types | Description |
---|
default |
| slot for drawer content |