Split View

A split view component for Angular applications that allows users to resize the panes within it.

Table of Contents

1. Installation
2. Usage
3. Examples
4. Documentation
* SplitViewComponent
* SplitPaneDirective
* SplitViewGutterDirective
5. Thanks

Installation

Install using npm in the usual way

``bash
$ npm install @husseintaha/ngx-split-view --save
`

Usage

1. Once you have installed ngx-split-view, you can import it in your AppModule:

`typescript
// a. Import SplitViewModule
import { SplitViewModule } from '@husseintaha/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.

Examples

$3

`html

Left pane (2/3rds size)

Right pane (1/3rd size)

`

$3

`html

Left pane (2/3rds size)

Right pane (1/3rd size)

`

$3

`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]`

Thanks

This component uses the excellent split.js library by Nathan Cahill to do the heavy lifting.