1.0.2 • Published 1 year ago
@monomorph/sliding-panels v1.0.2
Sliding Panels
A lightweight JavaScript library for creating sliding panels.
Installation
npm install sliding-panelsusage
import { SlidingPanels } from 'path/to/sliding-panels.js';
import 'path/to//sliding-panels.css';basic setup
<button id="panel-button">Toggle Panel</button>
<div id="panel" style="display: none;">
<div data-panel-handle>Drag Handle</div>
<div>Panel Content</div>
</div>initialization
import { SlidingPanels } from 'path/to/sliding-panels.js';
// Initialize SlidingPanels
const button = document.querySelector('#panel-button');
const panel = document.querySelector('#panel');
const slidingPanel = new SlidingPanels(button, panel,{options});arguments
button: the trigger for a specific function [required],
panel: the target panel to trigger [required],
options: optional configurationoptions
| Option | Type | Default | Description |
|---|---|---|---|
| thresholdTop | int | 25 | The top threshold (in percentage) to automatically open the panel. |
| thresholdBottom | int | 70 | The bottom threshold (in percentage) to automatically close the panel. |
| minVelocity | int/float | 500.00 | The minimum velocity (in pixels per second) to trigger open/close actions. |
| orientation | string | 'vertical' | The orientation of the panel (vertical or horizontal) |
example
const options = {
thresholdTop: 20,
thresholdBottom: 80,
minVelocity: 600,
orientation: 'horizontal'
};
const slidingPanel = new SlidingPanels(button, panel, options);methods
| method | description |
|---|---|
| togglePanel() | Toggles the panel between open and closed states. |
| openPanel() | Opens the panel. |
| closePanel() | Closes the panel. |
| setPanelPosition(percentage) | Sets the panels position to a specific percentage. |
| destroy() | Removes all event listeners and cleans up the panel instance. |
| closeAll(exceptPanel) | Closes all panels except the one passed as an argument. |
todo
add method to close all panels, when clicking/tapping outside panel