2.0.1 • Published 1 year ago
draggable-menu v2.0.1
Draggable Menu
This is a draggable menu web component. It allows you to create a menu that can be dragged out of view as well as toggled in/out.
Usage
First, import the component:
import 'draggable-menu';Then you can use it in your HTML:
<draggable-menu
position="left"
duration="0.8"
ease="power2.inOut"
>
<!-- Your content here -->
</draggable-menu>Attributes
| name | type | description | default |
|---|---|---|---|
| placement | string (right | left | top | bottom) | The position of the menu in the viewport | right |
| openPosition | string (% or px) | The position of the menu in the open state | 100% |
| closedPosition | string (% or px) | The position of the menu in the closed state | 0% |
| duration | number | The speed of the open/close animation in seconds. | 0.4 |
| ease | string | GSAP easing function (see options here) | power4.out |
| enableInert | boolean | Toggles the inert attribute when the menu is closed/open | false |
| handle | string | An element in your slotted content that acts as the drag handle. Defined as a css queryable string (fx. #handle or .handle) | undefined |
openPosition / closedPosition
A value in percent is calculated as a percentage of the viewport from the placement. A value in pixels will be the value in pixels from the placement.
Examples
/*
This content would be at 0% from the left of the viewport when closed and
100% from the left of the viewport when open
Note that the width of your content also determines how much of it the user will see.
A width of 100vw would make the entire content visible when open and all of it hidden when closed.
*/
<draggable-menu
position="left"
openPosition="100%"
closedPosition="0%"
>Events
Every state change is dispatched as a CustomEvent.
The event is dispatched on toggle() and drag actions.
The event type is DRAGGABLE_MENU_STATE and the event detail is an object with the following properties:
{
open: boolean, //The current state of the menu, true if open, false if closed
progress: number //The current progress of the animation from 0 to 1 (o being completey in the closedPosition and 1 being the openPosition,
}API
The component provides the following methods:
toggle(): Toggles the state of the menu. If the menu is open, it will close it, and vice versa.updateValues(): Updates the draggable menu's values.