Drawer

npm2.0.0

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.

Example

open drawer

This 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

right

This is a drawer

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

left

This is a drawer

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

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

Events

Name	Types	Description
`open`		dispatched when the drawer is opened
`close`		dispatched when the drawer is closed

Properties

Name	Types	Description
`closable`	`boolean`	determine if the drawer has a close button
`position`	`'left' \| 'right'`	determines drawer position relative to viewport
`i18n`		set default aria/i18n strings

Attributes

Name	Types	Description
`closable`	`boolean`	determine if the drawer has a close button
`position`	`'left' \| 'right'`	determines drawer position relative to viewport
`i18n`		set default aria/i18n strings

CSS Properties

Name	Types	Description
`--background`
`--padding`
`--width`
`--height`
`--overflow`

Slots

Name	Types	Description
`default`		slot for drawer content