cc-switch

CCMS switch button component

by Disciple_D

HTML

<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://114.215.169.170:8080/dist/ccms-components.js"></script>
<link rel="stylesheet" href="http://114.215.169.170:8080/dist/ccms-components.css">
<div ng-controller="ctrl" style="padding: 20px">
<h1>Switch button Demo</h1>
<p>Support Attribute</p>
<ul style="list-style: disc">
	<li style="list-style: inside">*ng-model</li>
	<li style="list-style: inside">ng-disabled</li>
	<li style="list-style: inside">ng-true-value</li>
	<li style="list-style: inside">ng-false-value</li>
	<li style="list-style: inside">open-text</li>
	<li style="list-style: inside">close-text</li>
</ul>

<div>
	<h2>Demo1</h2>
	<p>ng-model is required. If you just wanna have a fun, bind a useless model.</p>
	<p>value: {{demo1}}</p>
	<cc-switch ng-model="demo1"></cc-switch>

	<p>If you want change component size, rewrite <b>font-size</b> of the 'switch-button-block' class.</p>
	<cc-switch id="demo2" ng-model="demo1"></cc-switch>

	<p>If you want change component width, rewrite <b>width</b> of the 'switch-button-block' class. Using 'em' unit is recommended.</p>
	<cc-switch id="demo3" ng-model="demo1" open-text="long-words" close-text="short-words"></cc-switch>

	<h2>Demo2</h2>
	<p>value: {{demo2}} | disabled: {{demo2Disabled}}</p>
	<cc-switch ng-model="demo2" ng-disabled="demo2Disabled"></cc-switch><button ng-click="demo2Disabled=!demo2Disabled">change disabled</button>

	<h2>Demo3</h2>
	<p>Work with ng-true-value & ng-false-value</p>
	<p>value: {{demo3}} </p>
	<cc-switch ng-model="demo3" ng-true-value="'开'" ng-false-value="'关'"></cc-switch>
</div>

</div>

CSS

#demo2 .switch-button-block{
			font-size: 18px;
		}
    
#demo3 .switch-button-block{
			width: 8em;
		}

JavaScript

;(function (angular, undefined) {

	'use strict';

	angular
		.module('app', ['ccms.components'])
		.controller('ctrl', function ($scope) {

			$scope.demo1 = false;
		});

})(window.angular);