Drawer
Drawer
Toggles a container that slides in from the right, taking the entire height of the viewport.
You can override the default width by using the following custom property in an inline style attribute.
| Custom Property | Default Value | Description |
|---|---|---|
--max-width |
600px | The maxiumum width of the drawer |
Requires some JavaScript, included in the HTML sample.
Example
A button that triggers a drawer.
HTML
<button type="button" id="provider-drawer-trigger" class="pv-button-primary">Choose Provider</button>
<dialog id="provider-drawer" class="pv-drawer pv-surface">
...
</dialog>
<script>
function collapseSidebar() {
let layout = document.querySelector('.pv-layout-primary');
layout.toggleAttribute('data-collapsed');
}
const providerDrawer = document.querySelector('#provider-drawer');
const providerDrawerTrigger = document.querySelector('#provider-drawer-trigger');
providerDrawerTrigger.addEventListener('click', openDrawer);
function openDrawer() {
providerDrawer.showModal();
}
providerDrawer.addEventListener('click', closeDrawer);
function closeDrawer(e) {
//the below ensures that only clicking the overlay will close the dialog, not elements inside the dialog
if (e.target.nodeName === 'DIALOG') {
providerDrawer.close();
}
}
</script>