Split View
A split view component for Angular applications that allows users to resize the panes within it.
Table of Contents
Installation
Install using npm in the usual way
$ npm install ngx-split-view --save
Usage
- Once you have installed ngx-split-view, you can import it in your
AppModule
:
// a. Import SplitViewModule;
- Start using the
split-view
component in your templates
Left pane (2/3rds size) Right pane (1/3rd size)
Important Note: Always place the square brackets around the splitRatio
attribute.
Examples
Minimum size pane
Left pane (2/3rds size) Right pane (1/3rd size)
Horizontal split
Left pane (2/3rds size) Right pane (1/3rd size)
Custom gutter template
Left pane (2/3rds size) Right pane (1/3rd size)
Documentation
SplitViewComponent
The container for split view panes. It will render all content with SplitPaneDirective
, ignoring all other content.
Selector: split-view
Properties
Name | Description | Default |
---|---|---|
@Input() expandToMin: boolean |
Grow initial sizes to minSize on each pane | false |
@Input() gutterSize: number |
Gutter size in pixels | 10 |
@Input() gutterAlign: GutterAlignment |
Gutter alignment between elements | center |
@Input() snapOffset: number |
Snap to minimum size offset in pixels | 30 |
@Input() dragInterval: number |
Number of pixels to drag | 1 |
@Input() direction: SplitDirection |
Direction to split: horizontal or vertical | horizontal |
Events
Name | Description |
---|---|
@Output() dragging: EventEmitter<DragEvent> |
Called while dragging |
@Output() dragStart: EventEmitter<DragEvent> |
Called on drag start |
@Output() dragEnd: EventEmitter<DragEvent> |
Called on drag end |
Notes
These options map one-to-one with those exposed by split.js. Please see the documentation for more information
SplitPaneDirective
Pane selection directive. Allows specifying the ratio and minimum size of panes within the split-view
. Content without this directive will not be displayed.
Selector: [splitPane]
Properties
Name | Description | Default |
---|---|---|
@Input() splitRatio: number |
The size of the pane as a ratio | 1 |
@Input() minSize: number |
Minimum sizes pane in pixels | 100 |
SplitViewGutterDirective
The gutter definition for the split-view
. Captures the template gutters.
Selector: [gutterTemplate]
Thanks
This component uses the excellent split.js library by Nathan Cahill to do the heavy lifting.