Cell Content 1
Cell Content 2
Cell Content 3
Cell Content 4
A Resizable Split-Pane Layout for Angular6+
npm install ngx-resizable-ex```
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:
+--------+--------+
| > | [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 objectMIT