A simple, animating side drawer built as a Web Component
You can integrate side-drawer via <script>
tag or via NPM.
In the <head>
of your index.html put a script tag like this:
<script
type="module"
src="https://unpkg.com/side-drawer/side-drawer.js"
></script>
<!-- Or use the minified version -->
<script
type="module"
src="https://unpkg.com/side-drawer/side-drawer.min.js"
></script>
Now you can use the side-drawer
element anywhere in your html, JSX, template, etc.
npm install side-drawer --save
And then you need to import the module before you can use it in your html/jsx/template:
import "side-drawer";
This web component uses HTML templates, the shadow DOM, and custom elements. If you need to polyfill for any of these standards then take a look at the web components polyfill.
open
- Add this attribute to open the drawer.
- Example:
<side-drawer open></side-drawer>
- Example:
- Set the property in Javascript to imperatively toggle the drawer
- Example:
drawer.open = true
- Example:
- In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
- Example:
<side-drawer open={this.state.isDrawerOpen || undefined}></side-drawer>
- Example:
- Add this attribute to open the drawer.
open
- Raised when the drawer is opened.
- Example:
drawer.addEventListener("open", handleOpen())
- When subscribing in html listen for
onopen
- Ex:
<side-drawer onopen="handleOpen()">
- Ex:
close
-Raised when the drawer is closed.- Example:
drawer.addEventListener("close", handleClose())
- When subscribing in html listen for
onclose
- Ex:
<side-drawer onclose="handleClose()">
- Ex:
- Example:
You can style the side-drawer element as you would any regular element, in CSS. A list of supported CSS properties are below, along with the default values.
side-drawer {
background-color: #ffffff;
color: inherit;
width: 350px;
max-width: 75vw;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
You can set a backdrop filter using the following CSS variable.
--side-drawer-backdrop-filter
- Sets the backdrop-filter for both the drawer and the overlay that appears to the right of the drawer (when it's open).
- Default is
none
You can customize the overlay that appears to the right of the drawer (when it's open) by setting one of the following CSS variables.
--side-drawer-overlay-transition
- Sets the transition
- Default is
opacity 0.25s ease-in-out 0.25s
--side-drawer-overlay-opacity
- Sets the opacity of the overlay
- Default is
0.7
This project is built with standard HTML/CSS/TS, no frameworks or special web-component compilers here (for maximum simplicity and minimum size). If you want to learn more about writing custom elements see MDN or this web fundamentals page.
The source for this web component is contained in side-drawer.js and example usage is in index.html. To debug/run the example you can just open index.html in a browser. For a hot-reload developer experience try using live server in vscode.
You will need the dev dependencies of this project installed to run the post-commit hooks.
npm install