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.

Installation

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>

Bootstrap Color Schemes

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>

Color Alternatives

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>

Switch Sizing

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>

<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>

Borders

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>

Design

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 */
}

Publishing

Update version in package.json and bower.json.
Run make compile to minify files.
Run make publish to publish.

pjlasl / angular-ui-switch