Advanced User Interface Controls and Components
Created: 08 February 2018
In some cases when arranging elements inline, you may need to add a vertical splitter and resize them during run-time. As a solution, you can use the built-in functionality of IntegralUI Splitter component for Angular, which allows you add a vertical or horizontal splitter to any HTML element or Angular component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, you can see two <div> elements with a vertical splitter between them. To resize the elements, left-click and move the splitter in left or right direction.
Let us say you have a container and you want to split its space vertically to two elements. For this purpose, you can use a
<div class="split-vse-container" #container>
<div class="split-vse-panel-split split-vse-panel-inline" #panel1>
<span class="split-vse-panel-content">{{content1.body}}</span>
</div>
<iui-splitter></iui-splitter>
<div class="split-vse-panel-split split-vse-panel-inline" #panel2>
<span class="split-vse-panel-content">{{content2.body}}</span>
</div>
</div>
.split-vse-panel-split
{
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;
}
.split-vse-panel-inline
{
display: inline-block;
height: 100%;
}
.split-vse-panel-content
{
display: block;
padding: 5px;
}
.split-vse-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;
width: 600px;
height: 300px;
} In current state, you have 2 block elements and a splitter component between them. In order to appear in line, you need to set the CSS display attribute of each element to inline-block. This will make sure the elements are placed next to each other.
Right now, the splitter is not functional. You need to set the following Angular properties of the Splitter component:
To create a reference to block elements, you can use an Angular variable specified in tag of the HTML element. In this case, block elements have #panel1 and #panel2 variable names. Next, from code, you need to use ViewChild directive to get a reference to each element using its variable name. Once you have these references, you can add them as values to corresponding property of the Splitter component.
@ViewChild('container') containerElem: ElementRef;
@ViewChild('panel1') panel1Elem: ElementRef;
@ViewChild('panel2') panel2Elem: ElementRef;
public content1: any;
public content2: any;
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.'
}
} <div class="split-vse-container" #container>
<div class="split-vse-panel-split split-vse-panel-inline" #panel1>
<span class="split-vse-panel-content">{{content1.body}}</span>
</div>
<iui-splitter [panel1]="panel1Elem" [panel2]="panel2Elem" [splitterDistance]="200"></iui-splitter>
<div class="split-vse-panel-split split-vse-panel-inline" #panel2>
<span class="split-vse-panel-content">{{content2.body}}</span>
</div>
</div>
Finally, you may need to alter some CSS attributes of the splitter and the container (like its height), to make sure the splitter has the full height of the container.
<div class="split-vse-container" #container>
<div class="split-vse-panel-split split-vse-panel-inline" #panel1>
<span class="split-vse-panel-content">{{content1.body}}</span>
</div>
<iui-splitter style="height:100%;" [panel1]="panel1Elem" [panel2]="panel2Elem" [splitterDistance]="200"></iui-splitter>
<div class="split-vse-panel-split split-vse-panel-inline" #panel2>
<span class="split-vse-panel-content">{{content2.body}}</span>
</div>
</div>
As a result, you have a container with a splitter that divides its content between two block elements. Whenever splitter distance changes, the splitterMoving and splitterMoved events are fired. By handling these events, you can add custom code and extend the splitter functionality.
When you need to add a vertical splitter between HTML elements, you can use the IntegralUI Splitter component for Angular. You only need to add the component in HTML template and set up its panel properties to point to the references of each block element to which the splitter is attached.
The Splitter has built-in functionality that allows you to resize elements during run-time and fires an event whenever the distance changes, which you can handle in your code and place additional functionality.
The Splitter component is part of IntegralUI Web.