Advanced User Interface Controls and Components
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.
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.
In order to use the Splitter component in your app, you need to do the following:
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.
In order to change the behavior of the Splitter component, you can use the following properties:
Most of actions in the Splitter are accompanied by events. Here is a list of available events:
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>
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.
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.