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.

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.

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.

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.

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.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.