LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


CheckBox / Custom Appearance

{{ctrlText}}










This example shows how to customize the appearance of CheckBox directive.

By using the controlStyle attribute you can change every control part: general appearance, its check box and title. In case of our example we are changing the appearance of check box by replacing the default appearance with custom images.

By choosing a different option from panel on right side, you can see how the box of CheckBox control changes. You can apply a different image for each state: checked, indeterminate and unchecked.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.checkbox.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.checkbox.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-checkbox name="{{ctrlName}}" control-style="ctrlStyle" auto-check="true" three-state="isThreeState" checked="true">"{{ctrlText}}"</iui-checkbox>

<div>

<label>Choose a different appearance: </label><br /><br />

<label><input type="radio" ng-model="ctrlTheme" value="0" /> Default</label><br />

<label><input type="radio" ng-model="ctrlTheme" value="1" /> Option 1</label><br />

<label><input type="radio" ng-model="ctrlTheme" value="2" /> Option 2</label><br />

<label><input type="radio" ng-model="ctrlTheme" value="3" /> Option 3</label><br />

<label><input type="radio" ng-model="ctrlTheme" value="4" /> Option 4</label><br />

<label><input type="radio" ng-model="ctrlTheme" value="5" /> Option 5</label><br />

</div>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUICheckBoxService", function($scope, $ctrlService){

$scope.ctrlName = "ctrlSample";

$scope.ctrlTheme = "0";

$scope.ctrlStyle = null;

$scope.ctrlText = "CheckBox";

$scope.isThreeState = true;

 

var generalClassName = 'checkbox';

var generalTitle = "CheckBox";

 

$scope.$watch("ctrlTheme", function(newValue, oldValue){

if (newValue != oldValue){

if (newValue > 0){

$scope.isThreeState = newValue >= 3 ? false : true;

 

$scope.ctrlStyle = {

box: {

general: generalClassName,

checked: generalClassName + '-checked-' + newValue,

indeterminate: generalClassName + '-indeterminate-' + newValue,

unchecked: generalClassName + '-unchecked-' + newValue

}

}

 

switch (newValue){

case '3':

$scope.ctrlStyle.box.general = generalClassName + '-medium';

break;

case '5':

$scope.ctrlStyle.box.general = generalClassName + '-large';

break;

default:

$scope.ctrlStyle.box.general = generalClassName;

break;

}

 

$ctrlService.updateLayout($scope.ctrlName);

 

$scope.ctrlText = generalTitle + newValue;

}

else {

$scope.ctrlStyle = null;

$scope.ctrlText = generalTitle;

}

}

});

}]);

.checkbox

{

border: 0;

display: inline-block;

width: 16px;

height: 16px;

}

.checkbox-medium

{

border: 0;

display: inline-block;

width: 32px;

height: 14px;

}

.checkbox-large

{

border: 0;

display: inline-block;

width: 38px;

height: 14px;

}

.checkbox-checked-1

{

background-image: url("../../../resources/checkbox/checkbox-checked-1.png");

}

.checkbox-unchecked-1

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-1.png");

}

.checkbox-indeterminate-1

{

background-image: url("../../../resources/checkbox/checkbox-indeterminate-1.png");

}

.checkbox-checked-2

{

background-image: url("../../../resources/checkbox/checkbox-checked-2.png");

}

.checkbox-unchecked-2

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-2.png");

}

.checkbox-indeterminate-2

{

background-image: url("../../../resources/checkbox/checkbox-indeterminate-2.png");

}

.checkbox-checked-3

{

background-image: url("../../../resources/checkbox/checkbox-checked-3.png");

}

.checkbox-unchecked-3

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-3.png");

}

.checkbox-checked-4

{

background-image: url("../../../resources/checkbox/checkbox-checked-4.png");

}

.checkbox-unchecked-4

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-4.png");

}

.checkbox-checked-5

{

background-image: url("../../../resources/checkbox/checkbox-checked-5.png");

}

.checkbox-unchecked-5

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-5.png");

}

.checkbox-indeterminate-5

{

background-image: url("../../../resources/checkbox/checkbox-indeterminate-5.png");

}