Skip to content

Latest commit

 

History

History
135 lines (95 loc) · 4.23 KB

README.md

File metadata and controls

135 lines (95 loc) · 4.23 KB
Raw

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
  5. Thanks

Installation

Install using npm in the usual way

$ npm install ngx-split-view --save

Usage

  1. Once you have installed ngx-split-view, you can import it in your AppModule:
// a. Import SplitViewModule
import { SplitViewModule } from 'ngx-split-view';

@NgModule({
  // ....

  imports: [
    // b. Add SplitViewModule to your NgModule imports
    SplitViewModule
  ]
})
export class AppModule { }
  1. Start using the split-view component in your templates
<split-view>
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1">Right pane (1/3rd size)</div>
</split-view>

Important Note: Always place the square brackets around the splitRatio attribute.

Examples

Minimum size pane

<split-view>
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1" minSize="300">Right pane (1/3rd size)</div>
</split-view>

Horizontal split

<split-view direction="horizontal">
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1">Right pane (1/3rd size)</div>
</split-view>

Custom gutter template

<split-view>
  <div splitPane [splitRatio]="2">Left pane (2/3rds size)</div>
  <div splitPane [splitRatio]="1">Right pane (1/3rd size)</div>
  <div *gutterTemplate style="background: green"></div>
</split-view>

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.