Create Resizable Flexbox Elements In Pure JavaScript – Resizer.js

Category: Javascript | May 7, 2017
Author: eknowles
Views Total: 2,556
Official Page: Go to website
Last Update: May 7, 2017
License: MIT

Preview:

Create Resizable Flexbox Elements In Pure JavaScript – Resizer.js

Description:

The Resizer.js JavaScript library allows the user to resize a flexbox element using drag and drop.

Install the library via NPM:

$ npm install resizerjs

How to use it:

Download and place the Resizer.js script at the end of your html document.

<script src="resizer.js"></script>

Initialize the Resizer.js on the target element:

const selector = '.rz-demo'

let resizer = new Resizer(selector)

Remove the drag handler.

Resizer.removeBySelector(selector)

Customize the drag hanlder in your CSS.

[data-rz-handle] {
  flex: 0 0 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

[data-rz-handle] div {
  width: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

You Might Be Interested In:


Leave a Reply