A resizable flex-box split layout component for Angular
npm install ngx-split-viewA split view component for Angular applications that allows users to resize the panes within it.
1. Installation
2. Usage
3. Examples
4. Documentation
* SplitViewComponent
* SplitPaneDirective
* SplitViewGutterDirective
5. Thanks
Install using npm in the usual way
``bash`
$ npm install ngx-split-view --save
1. Once you have installed ngx-split-view, you can import it in your AppModule:
`typescript
// a. Import SplitViewModule
import { SplitViewModule } from 'ngx-split-view';
@NgModule({
// ....
imports: [
// b. Add SplitViewModule to your NgModule imports
SplitViewModule
]
})
export class AppModule { }
`
2. Start using the split-view component in your templates
`html`
Left pane (2/3rds size)
Right pane (1/3rd size)
Important Note: Always place the square brackets around the splitRatio attribute.
`html`
Left pane (2/3rds size)
Right pane (1/3rd size)
`html`
Left pane (2/3rds size)
Right pane (1/3rd size)
html
Left pane (2/3rds size)
Right pane (1/3rd size)
`Documentation
$3
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 | Called while dragging |
| @Output() dragStart: EventEmitter | Called on drag start |
| @Output() dragEnd: EventEmitter | Called on drag end |#### Notes
These options map one-to-one with those exposed by _split.js_. Please see the documentation for more information
$3
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 |$3
The gutter definition for the
split-view. Captures the template gutters.Selector:
[gutterTemplate]`This component uses the excellent split.js library by Nathan Cahill to do the heavy lifting.