Create Resizable Flexbox Elements In Pure JavaScript – Resizer.js

Category: Javascript | May 7, 2017
Author:eknowles
Views Total:2,319 views
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