update switch demos

components/switch/demo/basic.md

@@ -1,8 +1,8 @@
-# 用法示例
+# 简单
 
 - order: 0
 
-switch 用法
+最简单的用法。
 
 ---
 
@@ -14,22 +14,5 @@ function onChange(checked){
   console.log('switch to ' + checked);
 }
 
-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);
+React.render(<Switch defaultChecked={false} onChange={onChange} />, container);
 ````

components/switch/demo/disabled.md

@@ -0,0 +1,35 @@
+# 简单
+
+- order: 1
+
+最简单的用法。
+
+---
+
+````jsx
+var Switch = antd.Switch;
+var container = document.getElementById('components-switch-demo-disabled');
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      disabled: false
+    }
+  },
+  toggle(){
+    this.setState({
+      disabled: !this.state.disabled
+    });
+  },
+  render() {
+    return <div>
+      <Switch disabled={this.state.disabled} />
+      <br />
+      <br />
+      <button className="ant-btn atn-btn-primary" onClick={this.toggle}>Toggle disabled</button>
+    </div>;
+  }
+});
+
+React.render(<Test />, container);
+````

components/switch/demo/text.md

@@ -0,0 +1,18 @@
+# 文字和图标
+
+- order: 2
+
+带有文字和图标。
+
+---
+
+````jsx
+var Switch = antd.Switch;
+var container = document.getElementById('components-switch-demo-text');
+
+React.render(<div>
+  <Switch checkedChildren="开" unCheckedChildren="关" />
+  <span> </span>
+  <Switch checkedChildren={<i className="anticon anticon-check"></i>} unCheckedChildren={<i className="anticon anticon-cross"></i>} />
+</div>, container);
+````

style/components/switch.less

@@ -1,6 +1,6 @@
 @switchPrefixCls:ant-switch;
 
-@duration:.3s;
+@switch-duration:.3s;
 
 .@{switchPrefixCls}{
   position: relative;
@@ -14,7 +14,7 @@
   border: 1px solid #ccc;
   background-color: #ccc;
   cursor: pointer;
-  transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);
+  transition: all @switch-duration cubic-bezier(0.35, 0, 0.25, 1);
 
   &-inner {
     color:#fff;
@@ -29,15 +29,15 @@
     height: 18px;
     left: 2px;
     top:1px;
-    border-radius: 50% 50%;
+    border-radius: 100%;
     background-color: #ffffff;
     content: " ";
     cursor: pointer;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
     transform: scale(1);
-    transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
+    transition: left @switch-duration cubic-bezier(0.35, 0, 0.25, 1);
     animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
-    animation-duration: @duration;
+    animation-duration: @switch-duration;
     animation-name: rcSwitchOff;
   }