Drawer

npm1.8.3

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

left

right

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

// npm package
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