TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 11 March 2016
Usually for all tree items that have children in TreeView directive for AngularJS, an expand box is shown before the item label. If you want, you can make expand boxes to be hidden all the time, but it is better if they show up only when needed.
In this article, we will explain how to show expand boxes in the TreeView only when mouse cursor hovers over the tree view space. Otherwise, they will remain hidden. To further enhance this feature, we will add a CSS animation that changes the visibility of expand boxes depending on whether they will appear or disappear.
Whether expand boxes are present in the TreeView is determined by the showExpandBoxes property. This property by default is set to true, meaning that before each item that has children, an expand box is displayed. If we set this property value to false, the expand boxes will become hidden.
To change the visibility of expand boxes when mouse cursor enters or leaves the tree view space, we will use the mouseenter and mouseleave events. Whenever mouse cursor enters into the TreeView space, the expand boxes will appear, and whenever it leaves, they will disappear.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "$timeout", function($scope, $timeout){
$scope.isExpandBoxVisible = false;
$scope.onMouseEnter = function(){
$scope.isExpandBoxVisible = true;
}
$scope.onMouseLeave = function(){
$timeout(function(){
$scope.isExpandBoxVisible = false;
}, 1400);
}
}]);
<iui-treeview name="{{treeName}}" class="directive" items="data" ng-mouseenter="onMouseEnter()" ng-mouseleave="onMouseLeave()" show-expand-boxes="isExpandBoxVisible"></iui-treeview>
At first, this is all we need, but we can make it better if we add some animation, so that the change happens smoothly.
We will use CSS animations, one that will execute whenever the mouse cursor enters the TreeView space and the other when it leaves.
.directive
{
width: 400px;
height: 400px;
}
.iui-treeview-item
{
margin: 2px 0;
}
.iui-treeview-expand-box
{
animation: leave 1.0s 1s 1 forwards;
}
@keyframes leave
{
0% { opacity: 1; }
100% { opacity: 0; }
}
.iui-treeview:hover .iui-treeview-expand-box
{
animation: enter 1.0s 0s 1 forwards;
}
@keyframes enter
{
0% { opacity: 0; }
100% { opacity: 1; }
}
Our animation consists on changes to the opacity attribute of expand box element. We only need two states: 0% at start of animation, and 100% when animation is completed. Depending on animation type, the opacity value is changed from 0 to 1, or vice versa.
The 'leave' animation also has a time delay of 1 second, this makes expand boxes to remain visible for a while, prior making them invisible.
Animations also are synchronized with our previous code, so that whenever the mouse cursor enters the tree view space, the showExpandBoxes is set to true. Then the 'enter' animation will execute, making them gradually to appear. On other hand, when mouse cursor leaves the tree view space, the 'leave' animation is executed and expand boxes gradually will disappear. At the end, this followed by changing the showExpandBoxes to false, in mouseleave event handler, but only after short delay.
Changing the visibility of expand boxes in AngularJS TreeView is straightforward, you only need to set one property value, and they will either appear or disappear. Using CSS animations makes this process more visually appealing to the user.