Dragbar

Drag to resize

Dragbar is a small client side utility for enabling users to resize adjacent elements.

Installation

bash

npm install dragbar





or include it directly in your project if you’re not using a bundler.



Usage

javascript

//with bundler:

import dragbar from 'dragbar';



//without bundler:

import dragbar from './node_modules/dragbar/index.js';



//assuming: 

dragbar();





Function Signature

ts

dragbar(options: Object /optional/);

text

parameters:



options: {

  id: string,

  style: Object,

  reflow: [[el: Element, ratio: Number]]

}



id is the id of the dragbar element. Will default to "dragbar" if none provided.



style is to override the default styles of the dragbar with your own. Supply a js style object.



reflow is to manage the reflow of any elements that get resized as a result of the dragbar. You provide a list of elements and ratios, and for each one, whenever the dragbar position updates, the element will flip its flex-direction between column and row depending on the aspect ratio of the element compared to the ratio provided.



For example: If the ratio provided is 2, then when width >= 2height, flex-direction will be row, and when width < 2height, flex-direction will be column.

Working Example

Dragbar

Drag to resize

Dragbar is a small client side utility for enabling users to resize adjacent elements.

Installation

bash

npm install dragbar





or include it directly in your project if you’re not using a bundler.



Usage

javascript

//with bundler:

import dragbar from 'dragbar';



//without bundler:

import dragbar from './node_modules/dragbar/index.js';



//assuming: 

dragbar();





Function Signature

ts

dragbar(options: Object /optional/);

text

parameters:



options: {

  id: string,

  style: Object,

  reflow: [[el: Element, ratio: Number]]

}



id is the id of the dragbar element. Will default to "dragbar" if none provided.



style is to override the default styles of the dragbar with your own. Supply a js style object.



reflow is to manage the reflow of any elements that get resized as a result of the dragbar. You provide a list of elements and ratios, and for each one, whenever the dragbar position updates, the element will flip its flex-direction between column and row depending on the aspect ratio of the element compared to the ratio provided.



For example: If the ratio provided is 2, then when width >= 2height, flex-direction will be row, and when width < 2height, flex-direction will be column.