Drawer
Examples
Interaction
Read this handy introduction to HTML attributes and DOM properties
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.
active
attribute or property to make the drawer show or hide. The chi-drawer
element also has three public methods to interact with it: show()
, hide()
,
toggle()
.<!-- Trigger -->
<chi-button id="drawer-trigger" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer" position="left" backdrop>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer');
var drawerTrigger = document.getElementById('drawer-trigger');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
Use the function
chi.drawer(elem)
to instantiate a new drawer component in the DOM
element passed as a parameter. You must use the trigger element as the parameter.<!-- Trigger -->
<button id="drawer-trigger-1" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-1" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-1" class="chi-drawer -left">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-1'));</script>
Position
<!-- Trigger -->
<chi-button id="drawer-trigger-2" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-2" position="left">
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-2');
var drawerTrigger = document.getElementById('drawer-trigger-2');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-3" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-3" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div id="drawer-3" class="chi-drawer -left">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-3'));</script>
<!-- Trigger -->
<chi-button id="drawer-trigger-4" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-4" position="right">
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-4');
var drawerTrigger = document.getElementById('drawer-trigger-4');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-5" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-5" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div id="drawer-5" class="chi-drawer -right">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-5'));</script>
<!-- Trigger -->
<chi-button id="drawer-trigger-6" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-6" position="top">
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-6');
var drawerTrigger = document.getElementById('drawer-trigger-6');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-7" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-7" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div id="drawer-7" class="chi-drawer -top">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-7'));</script>
<!-- Trigger -->
<chi-button id="drawer-trigger-8" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-8" position="bottom">
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-8');
var drawerTrigger = document.getElementById('drawer-trigger-8');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-9" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-9" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div id="drawer-9" class="chi-drawer -bottom">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-9'));</script>
Backdrop
An optional backdrop can be added to focus the users attention on drawer content.
<!-- Trigger -->
<chi-button id="drawer-trigger-10" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-10" position="bottom" backdrop>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-10');
var drawerTrigger = document.getElementById('drawer-trigger-10');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-11" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-11" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-11" class="chi-drawer -bottom">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-11'));</script>
Titled
<!-- Trigger -->
<chi-button id="drawer-trigger-12" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-12" position="left" title="Drawer title here" backdrop>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-12');
var drawerTrigger = document.getElementById('drawer-trigger-12');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-13" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-13" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-13" class="chi-drawer -left">
<div class="chi-drawer__header">
<span class="chi-drawer__title">
Drawer title here
</span>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-13'));</script>
Close button
Close buttons provide users with a consistent way to exit Drawers. For special cases, such as requiring users to perform a task that auto-closes the Drawer when complete, a close button may be removed.
<!-- Trigger -->
<chi-button id="drawer-trigger-14" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-14" position="left" backdrop>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-14');
var drawerTrigger = document.getElementById('drawer-trigger-14');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-15" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-15" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-15" class="chi-drawer -left">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-15'));</script>
non-closable
attribute to render Drawer without a close button<!-- Trigger -->
<chi-button id="drawer-trigger-16" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-16" position="left" backdrop non-closable>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-16');
var drawerTrigger = document.getElementById('drawer-trigger-16');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-17" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-17" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-17" class="chi-drawer -left">
<div class="chi-drawer__header"></div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-17'));</script>
Header
Header markup is optional. Remove it to make the content fill the drawer.
<!-- Trigger -->
<chi-button id="drawer-trigger-18" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-18" position="left" backdrop>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-18');
var drawerTrigger = document.getElementById('drawer-trigger-18');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-19" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-19" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-19" class="chi-drawer -left">
<div class="chi-drawer__header">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-19'));</script>
<!-- Trigger -->
<chi-button id="drawer-trigger-20" type="icon">
<chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>
<!-- Drawer -->
<chi-drawer id="interactive-drawer-20" position="left" backdrop no-header>
<div class="-px--2 -text">Drawer content here</div>
</chi-drawer>
<!-- JavaScript -->
<script>
var drawer = document.getElementById('interactive-drawer-20');
var drawerTrigger = document.getElementById('drawer-trigger-20');
drawerTrigger.addEventListener('click', function(){
drawer.toggle();
// or drawer.active = !drawer.active;
});
</script>
<!-- Trigger -->
<button id="drawer-trigger-21" class="chi-button -icon chi-drawer__trigger" data-target="#drawer-21" aria-label="Toggle navigation">
<div class="chi-button__content">
<i class="chi-icon -sm--2 icon-menu"></i>
</div>
</button>
<!-- Drawer -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<div id="drawer-21" class="chi-drawer -left">
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
<div class="chi-drawer__content">
<div class="-px--2 -text">Drawer content here</div>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script>chi.drawer(document.getElementById('drawer-trigger-21'));</script>
Web Component
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
active | active | to open or close the drawer | boolean | undefined |
backdrop | backdrop | to add a backdrop behind the drawer, which covers the viewport | string | undefined |
noHeader | no-header | to remove the space for the header | boolean | undefined |
nonClosable | non-closable | To render Drawer without a close button | boolean | false |
position | position | to set position of the drawer { top, right, bottom or left } | string | undefined |
preventAutoHide | prevent-auto-hide | to prevent closing when the user clicked outside the Drawer | boolean | false |
title | title | to define drawer title. Not compatible with no-header | string | undefined |
Events
Event | Description | Type |
---|---|---|
chiDrawerHidden | Drawer has been hidden to the user. The animation has completed. | CustomEvent<any> |
chiDrawerHide | Drawer hide method has executed, but the closing animation has not started yet | CustomEvent<any> |
chiDrawerShow | Drawer show method has executed, but the showing animation has not started yet | CustomEvent<any> |
chiDrawerShown | Drawer has been shown to the user and is fully visible. The animation has completed. | CustomEvent<any> |
Methods
Method | Description | Returns | Parameters |
---|---|---|---|
hide() => Promise<void> | Hides the drawer | Type: Promise<void> | - |
show() => Promise<void> | Shows the drawer. | Type: Promise<void> | - |
toggle() => Promise<void> | Toggles active state (show/hide) | Type: Promise<void> | - |
JavaScript
This component accepts options to configure its behavior.
Option | Default | Description |
---|---|---|
animated | true | Enables animation on drawer display and hide, and fade effect in the backdrop. |
target | null | Lets the developer referer the target programmatically instead of by data-target attribute.
It accepts Element object and xpath selector string. |
preventAutoHide | false | Set preventAutoHide to true to prevent hidding the drawer when clicking
outside the drawer. |
Methods
Method | Description | Returns |
---|---|---|
hide() => void | Hides the drawer | Type: void |
show() => void | Shows the drawer | Type: void |
toggle() => void | Toggles active state (show/hide) | Type: void |
Preventing memory leaks
Drawer components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.
var elem = document.getElementById('drawer-1');
var drawer = chi.drawer(elem);
// do stuff
drawer.dispose();
It is safe to call the drawer
method more than once, as it will return any previously created drawer component
associated to the trigger.
var elem = document.getElementById('drawer-2');
var drawer = chi.drawer(elem);
var elem2 = document.getElementById('drawer-2');
var drawer2 = chi.drawer(elem2);
drawer === drawer2; // returns true
drawer.dispose(); // Only have to do it once.