Advanced User Interface Controls and Components
Created: 25 January 2017
Updated: 24 March 2017
IntegralUI SplitContainer is a native Angular 2 component that consists of two resizable panels separated by a splitter with tabs and command buttons. It allows you to place different content in two panels and change their size during run-time. In this article, we will give detailed information on what features are included in SplitContainer component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
The demonstration above shows a SplitContainer component, with option to change its orientation to horizontal or vertical. Each panel is represented by a tab with icon and title, also there is a swap button that when clicked will swap panels on demand. By left click and hold the splitter handle, you can change the size of panels.
In order to use the SplitContainer component in your app, you need to do the following:
When you place the split container in your app component, make sure at first its width and height is set, using CSS class or set its size indirectly from its parent block. SplitContainer accepts custom content as part of iui-panel1 and iui-panel2 tags. You can add any custom HTML element or other Angular 2 components as part of each panel.
To set the tab icon and title, you need to pass an object with icon and text fields. Icon is actually the name of CSS classes that loads an image and text field is a string that will be displayed in the tab.
//
// 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: ['splitcontainer-overview.css']
})
export class AppComponent {
// Variables used by SplitContainer component
private panel1Data: any;
private panel2Data: any;
private swap: boolean = true;
private scrollType = 'horizontal';
// Initialize app component constructor
constructor(){
this.panel1Data = {
icon: 'tab-icon library',
text: 'Books a little',
content: '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.panel2Data = {
icon: 'tab-icon album',
text: 'Music test longer label'
content: '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.'
}
}
onSwap(){
this.swap = !this.swap;
}
getOrientation(){
return this.scrollType == 'horizontal' ? IntegralUIOrientation.Horizontal : IntegralUIOrientation.Vertical;
}
}
//
// app.template.html file
//
<div class="block" align="center">
<label><input type="radio" [checked]="scrollType == 'horizontal'" (click)="scrollType = 'horizontal'" />Horizontal</label>
<label><input type="radio" [checked]="scrollType == 'vertical'" (click)="scrollType = 'vertical'" />Vertical</label>
</div>
<iui-splitcontainer [orientation]="getOrientation()" [splitterDistance]="200" [panel1]="panel1Data" [panel2]="panel2Data" (panelsSwapped)="onSwap()">
<iui-panel1>
<span *ngIf="swap" class="panel-content">{{panel1Data.content}}</span>
<span *ngIf="!swap" class="panel-content">{{panel2Data.content}}</span>
</iui-panel1>
<iui-panel2>
<span *ngIf="!swap" class="panel-content">{{panel1Data.content}}</span>
<span *ngIf="swap" class="panel-content">{{panel2Data.content}}</span>
</iui-panel2>
</iui-splitcontainer>
/*
splitcontainer-overview.css file
*/
.block
{
padding: 10px 0;
width: 400px;
}
.tab-icon
{
background: url(../resources/icons-x24.png) no-repeat 0 0;
display: inline-block;
padding: 0 !important;
margin: 0 1px 0 5px;
width: 24px;
height: 24px;
vertical-align: middle;
}
.library
{
background-position: 0 -72px;
}
.album
{
background-position: -144px -48px;
}
.iui-splitcontainer
{
width: 550px;
height: 450px;
}
.panel-content
{
display: block;
padding: 5px;
}
If you want to have first panel to appear in larger size, set a value to the splitterDistance property. This will rearrange the position of panels. By default this value is set to 100, which means the first panel will have its size set to 100 pixels.
In order to change the behavior of the SplitContainer component, you can use the following properties:
Depending on your application requirements, in some cases you may need to have resizable panels with vertical splitter, while in others with horizontal splitter. The orientation property allows you to change the orientation of the split container, either horizontally or vertically.
private splitOrientation: IntegralUIOrientation = IntegralUIOrientation.Horizontal;
<iui-splitcontainer [orientation]="splitOrientation" [panel1]="panel1Data" [panel2]="panel2Data"></iui-splitcontainer>
Most of actions in SplitContainer are accompanied by events. For example, whenever splitter is moving the splitterMoving and splitterMoved events are fired, etc.
Here is a list of available events:
You can use splitterMoving event to set boundaries in which the splitter can move. This is useful if you want to set a minimum size of panels. For example, let say the first panel should have a size of at least 25 pixels. In order to set this, add an event handler function where whenever spliterDistance passes the 25 mark, the splitter movement will stop.
onSplitterMoving(e: any){
if (e.value < 25)
e.cancel = true;
}
<iui-splitcontainer [orientation]="splitOrientation" [panel1]="panel1Data" [panel2]="panel2Data" (splitterMoving)="onSplitterMoving($event)"></iui-splitcontainer>
In above code, when condition is fulfilled, the event is cancelled.
The SplitContainer component comes with a style sheet that contains all CSS classes used by the split container. There are classes for most of the component parts: panels, tabs, swap button, splitter handle, etc. By changing the attributes of these classes in your code, you can modify the appearance of the SplitContainer, 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 SplitContainer is a fully customizable component that allows you to place resizable panels with separated using a splitter with tabs and command buttons. Each panel can contain custom HTML elements or other Angular components as its content. Depending on your app requirements, you can choose whether panels are arranged horizontally or vertically.
The SplitContainer component is part of IntegralUI Web.