LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI SplitContainer for Angular 2

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.

SplitContainer 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 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.

How to Use IntegralUI SplitContainer in Angular 2

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

  • Place the SplitContainer in your app using the iui-splitcontainer tag name
  • Place the iui-panel1 and iui-panel2 tag names as content
  • Add custom HTML elements as content to each panel
  • Set the icon and title for panels
  • (Optional) Set the initial splitter distance

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.

Supported Properties

In order to change the behavior of the SplitContainer 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 the names of custom CSS classes
  • orientation - determines whether splitter is horizontal or vertical
  • panel1 - Specifies an object that contains the tab icon and title for the first panel
  • panel2 - Specifies an object that contains the tab icon and title for the second panel
  • splitterDistance - specifies the distance of the splitter from the first panel
  • state - specifies the state of the SplitContainer: disabled, hovered, etc.

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>

Supported Events

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:

  • panelsSwapped - occurs when panels exchange their position
  • splitterMoved - occurs at the end of splitter movement and when splitterDistance changes
  • splitterMoving - occurs when splitter is moving

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.

How to Customize the SplitContainer Appearance

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.

Conclusion

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.

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.