Resizable Split Pane Layout

This has been adapted from the @11mb/angular-resizable, itself an Angular2 version of @reklino/angular-resizable for AngularJS. Similar work in JavaScript: @RickStrahl/jquery-resizable; Split.js by @nathancahill.

Usage

Installation instructions
Install ngx-bootstrap from npm:

``
npm install @3dgenomes/ngx-resizable --save
`
Add needed package to NgModule imports:
`
import { NgxResizableModule } from '@3dgenomes/ngx-resizable';

@NgModule({
...
imports: [ResizableComponent,...]
...
})
`
Use component to your HTML:

$3


`
+--------+--------+
| > | [Directions]
Row 1 | Cell 1 > Cell 2 | Rows: dragbar on bottom 'v'
| > | Cells: dragbar on right '>'
+ v v v v v v v v +
| > |
Row 2 | Cell 3 > Cell 4 |
| > |
+--------+--------+
`
`

Cell Content 1

Cell Content 2

Cell Content 3

Cell Content 4

`

$3

`
Col 1 Col 2
+--------+--------+
| > | [Directions]
| Cell 1 > Cell 3 | Rows: dragbar on right '>'
| > | Cells: dragbar on bottom 'v'
| v v v > v v v |
| > |
| Cell 2 > Cell 4 |
| > |
+--------+--------+
Drag bar
`
`

Cell Content 1

Cell Content 2

Cell Content 3

Cell Content 4

`

Options

Attributes | Default | Accepts | Description
--- | --- | --- | ---
rDirections | ['right'] | ['top', 'right', 'bottom', 'left',] | Determines which sides of the element are resizable.
rFlex | false | boolean | Set as true if you are using flexbox on a cell.

Events

$3

This event is emitted at the beginning of a resize with the following info object:
- info.width : The width of the directive at time of resize start. Will be false if resizing vertically
- info.height : The height of the directive at time of resize start. Will be false if resizing horizontally
- info.id : The id of the directive. Will be false if there is no id set.
- info.evt : original mouse event object

$3


Called repeatedly while the mouse is being moved. By default, only calls once every 100ms to keep CPU usage low.
- info.width : The width of the directive at time of resize end. Will be false if resizing vertically
- info.height : The height of the directive at time of resize end. Will be false if resizing horizontally
- info.id : The id of the directive. Will be false if there is no id set.
- info.evt : original mouse event object

$3

This event is emitted at the end of a resize with the following object as an argument:
- info.width : The width of the directive at time of resize end. Will be false if resizing vertically
- info.height : The height of the directive at time of resize end. Will be false if resizing horizontally
- info.id : The id of the directive. Will be false if there is no id set.
- info.evt` : original mouse event object

Version notes

$3

- Add README.md
- Export component via public_api.ts

License

MIT