├── .gitignore ├── Makefile ├── README.md ├── angular-ui-switch.css ├── angular-ui-switch.js ├── angular-ui-switch.min.css ├── angular-ui-switch.min.js ├── bower.json ├── example ├── app.js └── index.html ├── logo.png └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | NPM=./node_modules/.bin 2 | 3 | all: 4 | 5 | compile: js css 6 | 7 | publish: npm bower 8 | 9 | js: 10 | @echo "Minifying javascript ..." 11 | @$(NPM)/uglifyjs angular-ui-switch.js --compress --mangle --comments > angular-ui-switch.min.js 12 | 13 | css: 14 | @echo "Minifying css ..." 15 | @$(NPM)/minify angular-ui-switch.css > angular-ui-switch.min.css 16 | 17 | npm: 18 | @echo "Publishing as npm ..." 19 | npm publish 20 | 21 | bower: 22 | @echo "Publishing as bower ..." 23 | bower register angular-ui-switch git@github.com:xpepermint/angular-ui-switch.git 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [angular](https://angularjs.org/)-ui-switch 2 | 3 | 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. 4 | 5 | Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+ 6 | 7 | ![YoomJS](https://raw.githubusercontent.com/xpepermint/angular-ui-switch/master/logo.png) 8 | 9 | Inspired by [switchery](https://github.com/abpetkov/switchery) - in angular way. 10 | 11 | ## Installation 12 | 13 | Download the package from `github`. The package is also available over `npm install angular-ui-switch` or `bower install angular-ui-switch`. 14 | 15 | Include `javascript` and `css` files into your page. 16 | 17 | ```html 18 | 19 | 20 | 21 | ... 22 | 23 | 24 | 25 | ... 26 | 27 | 28 | 29 | 30 | ``` 31 | 32 | Declare a dependency on the module. 33 | 34 | ```js 35 | angular.module('myModule', ['uiSwitch']); 36 | ``` 37 | 38 | Insert the switch in your html template. 39 | 40 | ```html 41 | 45 | ``` 46 | 47 | Add optional on/off text 48 | ```html 49 | 53 | ``` 54 | 55 | Disabled state 56 | ```html 57 | 61 | ``` 62 | 63 | ## Design 64 | 65 | You can completely change the design. All the magic is hidden inside two CSS classes. 66 | 67 | ```css 68 | .switch { 69 | /* frame */ 70 | } 71 | .switch small { 72 | /* button */ 73 | } 74 | .switch.checked { 75 | /* frame when enabled */ 76 | } 77 | .switch.checked small { 78 | /* button when enabled */ 79 | } 80 | ``` 81 | 82 | ## Publishing 83 | 84 | 1. Update version in `package.json` and `bower.json`. 85 | 86 | 2. Run `make compile` to minify files. 87 | 88 | 3. Run `make publish` to publish. 89 | -------------------------------------------------------------------------------- /angular-ui-switch.css: -------------------------------------------------------------------------------- 1 | .switch { 2 | background: #fff; 3 | border: 1px solid #dfdfdf; 4 | position: relative; 5 | display: inline-block; 6 | box-sizing: content-box; 7 | overflow: visible; 8 | width: 52px; 9 | height: 30px; 10 | padding: 0px; 11 | margin: 0px; 12 | border-radius: 20px; 13 | cursor: pointer; 14 | box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; 15 | transition: 0.3s ease-out all; 16 | -webkit-transition: 0.3s ease-out all; 17 | top: -1px; 18 | } 19 | /*adding a wide width for larger switch text*/ 20 | .switch.wide { 21 | width:80px; 22 | } 23 | .switch small { 24 | background: #fff; 25 | border-radius: 100%; 26 | box-shadow: 0 1px 3px rgba(0,0,0,0.4); 27 | width: 30px; 28 | height: 30px; 29 | position: absolute; 30 | top: 0px; 31 | left: 0px; 32 | transition: 0.3s ease-out all; 33 | -webkit-transition: 0.3s ease-out all; 34 | } 35 | .switch.checked { 36 | background: rgb(100, 189, 99); 37 | border-color: rgb(100, 189, 99); 38 | } 39 | .switch.checked small { 40 | left: 22px; 41 | } 42 | /*wider switch text moves small further to the right*/ 43 | .switch.wide.checked small { 44 | left:52px; 45 | } 46 | /*styles for switch-text*/ 47 | .switch .switch-text { 48 | font-family:Arial, Helvetica, sans-serif; 49 | font-size:13px; 50 | } 51 | 52 | .switch .off { 53 | display:block; 54 | position: absolute; 55 | right: 10%; 56 | top: 25%; 57 | z-index: 0; 58 | color:#A9A9A9; 59 | } 60 | 61 | .switch .on { 62 | display:none; 63 | z-index: 0; 64 | color:#fff; 65 | position: absolute; 66 | top: 25%; 67 | left: 9%; 68 | } 69 | 70 | .switch.checked .off { 71 | display:none; 72 | } 73 | 74 | .switch.checked .on { 75 | display:block; 76 | 77 | } 78 | 79 | .switch.disabled { 80 | opacity: .50; 81 | cursor: not-allowed; 82 | } 83 | -------------------------------------------------------------------------------- /angular-ui-switch.js: -------------------------------------------------------------------------------- 1 | angular.module('uiSwitch', []) 2 | 3 | .directive('switch', function(){ 4 | return { 5 | restrict: 'AE' 6 | , replace: true 7 | , transclude: true 8 | , template: function(element, attrs) { 9 | var html = ''; 10 | html += ''+attrs.on+'' : ''; /*switch text on value set by user in directive html markup*/ 23 | html += attrs.off ? ''+attrs.off + '' : ' '; /*switch text off value set by user in directive html markup*/ 24 | html += ''; 25 | return html; 26 | } 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /angular-ui-switch.min.css: -------------------------------------------------------------------------------- 1 | .switch{background:#fff;border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;height:30px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}.switch.wide{width:80px}.switch small{background:#fff;border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;height:30px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;position:absolute;right:10%;top:25%;z-index:0;color:#A9A9A9}.switch .on{display:none;z-index:0;color:#fff;position:absolute;top:25%;left:9%}.switch.checked .off{display:none}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed} 2 | -------------------------------------------------------------------------------- /angular-ui-switch.min.js: -------------------------------------------------------------------------------- 1 | angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="'+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}}); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-switch", 3 | "version": "0.1.1", 4 | "main": ["angular-ui-switch.js", "angular-ui-switch.css"], 5 | "authors": [ 6 | "xpeper " 7 | ], 8 | "description": "iOS 7 style switch directive for AngularJS", 9 | "keywords": [ 10 | "angular", 11 | "angularjs", 12 | "ui", 13 | "directive", 14 | "switch", 15 | "on", 16 | "off", 17 | "button", 18 | "checkbox", 19 | "form" 20 | ], 21 | "license": "MIT", 22 | "homepage": "https://github.com/xpepermint/angular-ui-switch", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "test", 28 | "tests" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | angular.module('app', ['uiSwitch']) 2 | 3 | .controller('MyController', function($scope) { 4 | $scope.enabled = true; 5 | $scope.onOff = true; 6 | $scope.yesNo = true; 7 | $scope.disabled = true; 8 | 9 | 10 | $scope.changeCallback = function() { 11 | console.log('This is the state of my model ' + $scope.enabled); 12 | }; 13 | }); 14 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xpepermint/angular-ui-switch/bde4711ed82d4e54c8173232e2e6fc17c2d2b3e4/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-switch", 3 | "version": "0.1.1", 4 | "description": "iOS 7 style switch directive for AngularJS", 5 | "main": "angular-ui-switch.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/xpepermint/angular-ui-switch.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "angularjs", 16 | "ui", 17 | "directive", 18 | "switch", 19 | "on", 20 | "off", 21 | "button", 22 | "checkbox", 23 | "form" 24 | ], 25 | "author": "xpeper ", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/xpepermint/angular-ui-switch/issues" 29 | }, 30 | "homepage": "https://github.com/xpepermint/angular-ui-switch", 31 | "devDependencies": { 32 | "minify": "^1.0.4", 33 | "uglify-js": "^2.4.15" 34 | } 35 | } 36 | --------------------------------------------------------------------------------