resize-handle

Robust resize handles / splitters for your HTML5 apps and websites

Showing:

Popularity

Downloads/wk

137

GitHub Stars

14

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

2.2KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

resize-handle

Robust, no-frills, stylable resize handles / splitters for HTML5 apps.

How to install

npm install resize-handle

Usage

Check out the live demo and its source code.

You'll need to setup a display: flex; box-sizing: border-box; container with two div children. Make the main pane flex: 1; flex-basis: 0; and give it a min-width. Make sure to set the sidebar's width and min-width (or height, if vertical).

Include lib/ResizeHandle.js in your project and create the handle by calling new ResizeHandle(document.querySelector("#sidebar"), "right"). You can pass { collapsable: true } as a third argument to enable double-click-to-collapse.

The object returned by the ResizeHandle constructor emits dragStart, drag and dragEnd events.

See index.d.ts for the full API.

Building from source

  • Make sure you have a recent version of Node.js installed.
  • Clone the repository from https://github.com/sparklinlabs/resize-handle and run npm install once
  • Run npm run build to build once or npm run watch to start a watcher that will rebuild when changes are detecting

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100