LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI Splitter for Angular 2

Created: 25 January 2017

Updated: 24 March 2017

IntegralUI Splitter is a native Angular 2 component that allows you to resize two different blocks or elements during run-time. In this article, we will give detailed information on what features are included in Splitter component.

Splitter component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

The demonstration above shows two Splitter components, the first one is horizontal and second one is vertical. By left-click hold and moving of the splitter, the panels will resize based on moving direction. The splitter cannot move past the end of each panel.

How to Use IntegralUI Splitter in Angular 2

In order to use the Splitter component in your app, you need to do the following:

  • Place the Splitter between two block elements using the iui-splitter tag name
  • Set a unique variable to each block element
  • Apply references of block elements to the Splitter component
  • Add custom HTML elements or Angular 2 Components as content to block elements
  • (Optional) Connect the Splitter to your data source

In order for splitter to work, you must have references for the block elements set. To retrieve these references, use the variable of each block element and call the ViewChild. The result should be of ElementRef type.

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui/integralui.module';

 

@NgModule({

imports: [ BrowserModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

import { Component } from '@angular/core';

import { IntegralUIOrientation } from 'integralui/components/integralui.core';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['splitter-overview.css']

})

export class AppComponent {

// References to the block elements

@ViewChild('container') containerElem: ElementRef;

@ViewChild('panel1') panel1Elem: ElementRef;

@ViewChild('panel2') panel2Elem: ElementRef;

@ViewChild('panel3') panel3Elem: ElementRef;

 

// Data objects

private content1: any;

private content2: any;

private content3: any;

 

// Orientation of the second Splitter

private splitterOrientation: IntegralUIOrientation = IntegralUIOrientation.Horizontal;

 

// Initialize app component constructor

constructor(){

this.content1 = {

body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'

}

 

this.content2 = {

body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'

}

 

this.content3 = {

body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'

}

}

 

 

}

//

// app.template.html file

//

 

<div style="width:500px;">

<div class="panel" #panel1>

<span class="panel-content">{{content1.body}}</span>

</div>

<iui-splitter [panel1]="panel1Elem" [panel2]="containerElem" [orientation]="splitterOrientation" [splitterDistance]="100"></iui-splitter>

lt;div class="bottom-container" #container>

<div class="panel panel-inline" #panel2>

<span class="panel-content">{{content2.body}}</span>

</div>

<iui-splitter [panel1]="panel2Elem" [panel2]="panel3Elem" [splitterDistance]="175"></iui-splitter>

<div class="panel panel-inline" #panel3>

<span class="panel-content">{{content3.body}}</span>

</div>

</div>

</div>

.panel

{

background: white;

border: thin solid #c5c5c5;

display: block;

overflow: hidden;

 

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-o-user-select: none;

-ms-user-select: none;

user-select: none;

}

.panel-inline

{

display: inline-block;

height: 100%;

}

.panel-content

{

display: block;

padding: 5px;

}

.bottom-container

{

border-bottom: thin solid #c5c5c5;

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

overflow: hidden;

 

height: 300px;

}

You can add any custom HTML element or other Angular 2 components as part of each block element.

To set the splitter position, use the splitterDistance property. By default this property is set to 0, which means the position is taken from the size of first block element.

Supported Properties

In order to change the behavior of the Splitter component, you can use the following properties:

  • controlStyle - specifies an object that holds the names of custom CSS classes
  • data - specifies an object that holds data related to the Splitter
  • orientation - determines whether splitter is horizontal or vertical
  • panel1 - holds a reference to the first block element
  • panel2 - holds a reference to the second block element
  • splitterDistance - specifies the distance of the splitter from the first panel
  • state - specifies the state of the Splitter: disabled, hovered, etc.

Supported Events

Most of actions in the Splitter are accompanied by events. Here is a list of available events:

  • splitterMoved - occurs at the end of splitter movement and when splitterDistance changes
  • splitterMoving - occurs when splitter is moving

Whenever splitter is moved, above events are fired. You can add handler functions for these events with custom actions in your code. For example, to prevent movement of the splitter past specific point.

onSplitterMoving(e: any){

// Add your code here to intercept splitter movement

}

 

onSplitterMoved(e: any){

// Add your code here when splitter movement ends

}

<iui-splitter [panel1]="panel2Elem" [panel2]="panel3Elem" (splitterMoving)="onSplitterMoving($event)" (splitterMoved)="onSplitterMoved($event)"></iui-splitter>

How to Customize the Splitter Appearance

The Splitter component comes with a style sheet that contains all CSS classes used by the split container. There are classes: general splitter appearance and its handle. For example, you can apply a different image for the splitter handle or use solid colors. By changing the attributes of these classes in your code, you can modify the appearance of the Splitter, partially or in whole.

Furthermore, you can add your own CSS classes and override the default ones within your application code. For this purpose, the controlStyle property is used, which is an object holding the names of CSS classes for each control part. By changing this object value, you can add the names of new classes and replace the default ones.

Conclusion

IntegralUI Splitter is a simple component that allows you to resize two block elements during run-time. Each block can contain custom HTML elements or other Angular components as its content. Depending on your app requirements, you can choose whether splitter has horizontal or vertical orientation.

The Splitter component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.