angular-ui-switch
This is a simple iOS 7 style switch directive for AngularJS. You can use this module as you would use the default HTML checkbox input element. This is a super lightweight module and you can completely change the design using just CSS.
Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+
Inspired by switchery - in angular way.
Download the package from github. The package is also available over npm install angular-ui-switch or bower install angular-ui-switch.
Include javascript and css files into your page.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
...
<link rel="stylesheet" href="/ui-switch.min.css"/>
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script src="/ui-switch.min.js"></script>
</body>
</html>Declare a dependency on the module.
angular.module('myModule', ['uiSwitch']);Insert the switch in your html template.
<form>
<switch id="enabled" name="enabled" ng-model="enabled"></switch>
<br>{{ enabled }}
</form>Add optional on/off text
<form>
<switch id="enabled" name="enabled" ng-model="enabled" on="On" off="Off"></switch>
<br>{{ enabled }}
</form>Disabled state
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true"></switch>
<br>{{ enabled }}
</form>Default Color
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true"></switch>
<br>{{ enabled }}
</form>Success Color
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="success"></switch>
<br>{{ enabled }}
</form>Info Color
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="info"></switch>
<br>{{ enabled }}
</form>Warning Color
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="warning"></switch>
<br>{{ enabled }}
</form>- Danger Color
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="danger"></switch>
<br>{{ enabled }}
</form>- You can use the DARK version of the colors above by appending -dark (i.e. success-dark)
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" size="lg" class="success-dark"></switch>
<br>{{ enabled }}
</form>- You can also INVERT the control colors.
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" size="lg" class="invert success"></switch>
<br>{{ enabled }}
</form>- Small
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" size="sm" class="success"></switch>
<br>{{ enabled }}
</form>- Medium (default)
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="success"></switch>
<br>{{ enabled }}
</form>or
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" size="md" class="success"></switch>
<br>{{ enabled }}
</form>- Large
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" size="lg" class="success"></switch>
<br>{{ enabled }}
</form>You can add borders around your control. The border will match the color scheme you are using.
<form>
<switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="success border"></switch>
<br>{{ enabled }}
</form>You can completely change the design. All the magic is hidden inside two CSS classes.
.switch {
/* frame */
}
.switch small {
/* button */
}
.switch.checked {
/* frame when enabled */
}
.switch.checked small {
/* button when enabled */
}-
Update version in
package.jsonandbower.json. -
Run
make compileto minify files. -
Run
make publishto publish.