Cell Content 1
Cell Content 2
Cell Content 3
Cell Content 4
A Resizable Split-Pane Layout for Angular6+
npm install @3dgenomes/ngx-resizable```
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 objectLibrary Version notes
$3
- Update to Angular 8$3
- Correct NPM upload$3
- Update packaging$3
- Update deps to fix TAR security$3
- Fix aot compile issue since window does not exist$3
- Add README.md
- Export component via public-api.tsDemo Version notes
$3
- Update version display
License
MIT
Development
This project was generated with Angular CLI.Demo app development server
Run
ng s for a dev server. Navigate to http://localhost:4200/. The demo app will automatically reload if you change any of the source files.Build using package script
Run
npm run package to build the project. The build artifacts and NPM tarball will be stored in the dist/ directory. The demo app will be stored in the docs/ directory and automatically published to https://3dgenomes.github.io/ngx-resizable/ when pushed to GitHub.Publishing to NPM
After building and commit/push/merge to Github:
1. update the version notes in the root README.md
2. update the version number in the library: projects/ngx-resizable/package.json
3. login to npm: npm login (check if already loggedin using npm whoami)
4. publish using: npm publish ./dist/ngx-resizable/3dgenomes-ngx-resizable-1.8.1.tgz --access public.Running unit tests
Run
ng test to execute the unit tests via Karma.Running end-to-end tests
Run
ng e2e to execute the end-to-end tests via Protractor.Further help
To get more help on the Angular CLI use
ng help` or go check out the Angular CLI README.