JarCasting
JarCasting JarCasting

angular-ui-switch

WebJar for angular-ui-switch

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-ui-switch
Last Version

Last Version

0.1.1
Release Date

Release Date
Type

Type

jar
Description

Description

angular-ui-switch
WebJar for angular-ui-switch
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/xpepermint/angular-ui-switch

Download angular-ui-switch

Filename Size
angular-ui-switch-0.1.1.pom
angular-ui-switch-0.1.1.jar 24 KB
angular-ui-switch-0.1.1-sources.jar 22 bytes
angular-ui-switch-0.1.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-switch/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-ui-switch</artifactId>
    <version>0.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-switch/
implementation 'org.webjars.bower:angular-ui-switch:0.1.1'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-switch/
implementation ("org.webjars.bower:angular-ui-switch:0.1.1")
'org.webjars.bower:angular-ui-switch:jar:0.1.1'
<dependency org="org.webjars.bower" name="angular-ui-switch" rev="0.1.1">
  <artifact name="angular-ui-switch" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-ui-switch', version='0.1.1')
)
libraryDependencies += "org.webjars.bower" % "angular-ui-switch" % "0.1.1"
[org.webjars.bower/angular-ui-switch "0.1.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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+

YoomJS

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" class="green"></switch>
  <br>{{ enabled }}
</form>

Add optional on/off text

<form>
  <switch id="enabled" name="enabled" ng-model="enabled" on="On" off="Off" class="green"></switch>
  <br>{{ enabled }}
</form>

Disabled state

<form>
  <switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="green"></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

  1. Update version in package.json and bower.json.

  2. Run make compile to minify files.

  3. Run make publish to publish.

Versions

Version
0.1.1
0.1.0