add switch

components/form/demo/mix.md

@@ -11,6 +11,7 @@ var Select = antd.Select;
 var Option = Select.Option;
 var InputNumber = antd.InputNumber;
 var Datepicker = antd.Datepicker;
+var Switch = antd.Switch;
 
 
 function handleSelectChange(value) {
@@ -44,7 +45,7 @@ React.render(
     <div className="ant-form-item">
       <label for="" className="col-6" required>Switch 开关:</label>
       <div className="col-10">
-        <p className="ant-form-text">请填写 switch</p>
+        <Switch />
       </div>
     </div>
     <div className="ant-form-item">

components/switch/demo/basic.md

@@ -0,0 +1,18 @@
+# 基本用法
+
+- order: 0
+
+简单的 switch。
+
+---
+
+````jsx
+var Switch = antd.Switch;
+var container = document.getElementById('components-switch-demo-basic');
+
+function onChange(checked){
+  console.log('switch to ' + checked);
+}
+
+React.render(<Switch defaultChecked={false} onChange={onChange}/>, container);
+````

components/switch/index.jsx

@@ -0,0 +1,15 @@
+var Switch = require('rc-switch');
+var React = require('react');
+
+var AntSwitch = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-switch'
+    };
+  },
+  render() {
+    return <Switch {...this.props}/>;
+  }
+});
+
+module.exports = AntSwitch;

components/switch/index.md

@@ -11,3 +11,13 @@
 
 - 需要表示开关状态/两种状态之间的切换时；
 - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
+
+## API
+
+### Switch
+
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+|  checked | 指定当前是否选中 | boolean  |   | false    |
+|  defaultChecked | 初始是否选中 | boolean |  | false |
+|  onChange | 变化时回调函数 | Function(checked:boolean) |  |  |

index.js

@@ -14,7 +14,8 @@ var antd = {
   Popconfirm: require('./components/popconfirm'),
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),
-  InputNumber: require('./components/input-number')
+  InputNumber: require('./components/input-number'),
+  Switch: require('./components/switch')
 };
 
 module.exports = antd;

package.json

@@ -22,6 +22,7 @@
     "rc-progress": "~1.0.0",
     "rc-select": "~4.0.0",
     "rc-steps": "~1.1.3",
+    "rc-switch": "~1.1.0",
     "rc-tabs": "~5.1.0",
     "rc-tooltip": "~2.3.0"
   },

style/components/index.less

@@ -1,4 +1,5 @@
 @import "button";
+@import "switch";
 @import "dropdown";
 @import "progress";
 @import "select";

style/components/switch.less

@@ -0,0 +1,94 @@
+@switchPrefixCls:ant-switch;
+
+.@{switchPrefixCls}{
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 20px 20px;
+  border: 1px solid #bcbcbc;
+  background-color: #bcbcbc;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+
+  &:after{
+    display: block;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50% 50%;
+    background-color: #ffffff;
+    content: " ";
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    transform: scale(1);
+    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+    animation-duration: 0.3s;
+    animation-name: rcSwitchOff;
+  }
+
+  &:hover:after{
+    transform: scale(1.1);
+    animation-name: rcSwitchOn;
+  }
+
+  &-checked{
+    border: 1px solid #64b6f7;
+    background-color: #64b6f7;
+
+    &:after{
+      left: 18px;
+    }
+  }
+
+  &-disabled{
+    cursor: no-drop;
+
+    &:after{
+      background: #9e9e9e;
+      animation-name: none;
+      cursor: no-drop;
+    }
+
+    &:hover:after{
+      transform: scale(1);
+      animation-name: none;
+    }
+  }
+
+  &-label {
+    display: inline-block;
+    line-height: 20px;
+    font-size: 14px;
+    padding-left: 10px;
+    vertical-align: middle;
+    white-space: normal;
+    pointer-events: none;
+    user-select: text;
+  }
+}
+
+@keyframes rcSwitchOn {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+@keyframes rcSwitchOff {
+  0% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}