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
This is a drawer
leftright
code
<bp-drawer closable hidden>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<div id="drawer-options" bp-layout="inline gap:xs">
<bp-button value="left" action="outline">left</bp-button>
<bp-button value="right" action="outline">right</bp-button>
</div>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
const drawer = document.querySelector('bp-drawer');
const options = document.querySelector('#drawer-options');
options.addEventListener('click', (e) => {
if (e.target.tagName === 'BP-BUTTON') {
drawer.position = e.target.value;
drawer.hidden = false;
}
});
drawer.addEventListener('close', () => (drawer.hidden = true));
</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
Properties
Name | Types | Description |
closable | boolean | |
static | boolean | |
position | 'left' | 'right' | |
i18n |
| |
Attributes
Name | Types | Description |
closable | boolean | |
static | boolean | |
position | 'left' | 'right' | |
i18n |
| |
CSS Properties
Name | Types | Description |
--background: |
| var(--bp-layer-container-background); |
--padding |
| |
--width |
| |
--height |
| |
--overflow |
| |
Slots
Name | Types | Description |
default |
| slot for drawer content |