Merge branch 'master' of github.com:ant-design/ant-design

components/switch/demo/basic.md

@@ -1,8 +1,8 @@
-# 基本用法
+# 用法示例
 
 - order: 0
 
-简单的 switch。
+switch 用法
 
 ---
 
@@ -14,5 +14,22 @@ function onChange(checked){
   console.log('switch to ' + checked);
 }
 
-React.render(<Switch defaultChecked={false} onChange={onChange}/>, container);
+React.render(<div>
+<p>
+simple:&nbsp;
+<Switch defaultChecked={false} onChange={onChange}/><br/>&nbsp;
+</p>
+<p>
+disabled:&nbsp;
+<Switch disabled/><br/>&nbsp;
+</p>
+<p>
+children:&nbsp;
+<Switch checkedChildren="开" unCheckedChildren="关"/><br/>&nbsp;
+</p>
+<p>
+icon children:&nbsp;
+<Switch checkedChildren={<i className="anticon anticon-check"></i>} unCheckedChildren={<i className="anticon anticon-cross"></i>}/>
+</p>
+</div>, container);
 ````

components/switch/index.md

@@ -21,3 +21,5 @@
 |  checked | 指定当前是否选中 | boolean  |   | false    |
 |  defaultChecked | 初始是否选中 | boolean |  | false |
 |  onChange | 变化时回调函数 | Function(checked:boolean) |  |  |
+|  checkedChildren | 选中时的内容 | React Node |  |  |
+|  unCheckedChildren | 非选中时的内容 | React Node |  |  |

package.json

@@ -11,6 +11,7 @@
   "bugs": {
     "url": "https://github.com/ant-design/ant-design/issues"
   },
+  "license": "MIT",
   "dependencies": {
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
@@ -23,7 +24,7 @@
     "rc-progress": "~1.0.0",
     "rc-select": "~4.2.1",
     "rc-steps": "~1.1.3",
-    "rc-switch": "~1.1.0",
+    "rc-switch": "~1.2.0",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0"
   },
@@ -47,6 +48,7 @@
     "webpack": "^1.10.1",
     "webpack-dev-middleware": "^1.2.0"
   },
+
   "scripts": {
     "babel": "babel components --out-dir lib",
     "build": "npm run clean && webpack && nico build",

style/components/switch.less

@@ -1,34 +1,43 @@
 @switchPrefixCls:ant-switch;
 
+@duration:.3s;
+
 .@{switchPrefixCls}{
   position: relative;
   display: inline-block;
-  width: 38px;
+  box-sizing: border-box;
-  height: 20px;
+  width: 44px;
+  height: 22px;
   line-height: 20px;
   vertical-align: middle;
   border-radius: 20px 20px;
-  border: 1px solid #bcbcbc;
+  border: 1px solid #ccc;
-  background-color: #bcbcbc;
+  background-color: #ccc;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+  transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);
+
+  &-inner {
+    color:#fff;
+    font-size: 12px;
+    position: absolute;
+    left:24px;
+  }
 
   &:after{
-    display: block;
     position: absolute;
-    top: -1px;
+    width: 18px;
-    left: -1px;
+    height: 18px;
-    width: 20px;
+    left: 2px;
-    height: 20px;
+    top:1px;
     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);
+    transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
     animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
-    animation-duration: 0.3s;
+    animation-duration: @duration;
     animation-name: rcSwitchOff;
   }
 
@@ -38,16 +47,22 @@
   }
 
   &-checked{
-    border: 1px solid #64b6f7;
+    border: 1px solid #87d068;
-    background-color: #64b6f7;
+    background-color: #87d068;
+
+    .@{switchPrefixCls}-inner {
+      left:6px;
+    }
 
     &:after{
-      left: 18px;
+      left: 22px;
     }
   }
 
   &-disabled{
     cursor: no-drop;
+    background: #ccc;
+    border-color:#ccc;
 
     &:after{
       background: #9e9e9e;