add radio

components/checkbox/index.md

@@ -20,4 +20,4 @@
 |-----------|------------------------------------------|------------|-------|--------|
 |  checked | 指定当前是否选中 | boolean  |   | false    |
 |  defaultChecked | 初始是否选中 | boolean |  | false |
-|  onChange | 变化时回调函数 | Function(e:Event) |  |  |
+|  onChange | 变化时回调函数 | Function(e:Event) |  |  | |

components/radio/demo/basic.md

@@ -0,0 +1,17 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Radio = antd.Radio;
+
+React.render(
+<label>
+  <Radio/> Radio
+  </label>
+, document.getElementById('components-radio-demo-basic'));
+````

components/radio/demo/disable.md

@@ -0,0 +1,17 @@
+# 不可用
+
+- order: 1
+
+Radio 不可用。
+
+---
+
+````jsx
+var Radio = antd.Radio;
+var container = document.getElementById('components-radio-demo-disable');
+
+React.render(<div>
+  <Radio defaultChecked={false} disabled={true}/> &nbsp;&nbsp;
+  <Radio defaultChecked={true} disabled={true}/>
+</div>, container);
+````

components/radio/demo/group.md

@@ -0,0 +1,75 @@
+# 组合
+
+- order: 1
+
+Radio 组合。
+
+---
+
+````jsx
+var Radio = antd.Radio;
+var container = document.getElementById('components-radio-demo-group');
+var RadioGroup=React.createClass({
+  getInitialState() {
+    return {
+      disabled: false,
+      r: 'a'
+    }
+  },
+  handleChange(e) {
+    this.setState({
+      r: e.target.value
+    })
+  },
+  toggle() {
+    this.setState({
+      disabled: !this.state.disabled
+    });
+  },
+  render() {
+    return <div>
+      <div>
+        <p>
+          <label>
+            <Radio value="a"
+              checked = {this.state.r === 'a'}
+              onChange={this.handleChange}
+              disabled={this.state.disabled}/>
+          &nbsp; 0-10
+          </label>
+          <br/>
+          <label>
+            <Radio value="b"
+              checked = {this.state.r === 'b'}
+              onChange={this.handleChange}
+              disabled={this.state.disabled}/>
+          &nbsp; 11-20
+          </label>
+          <br/>
+          <label>
+            <Radio value="c"
+              checked = {this.state.r === 'c'}
+              onChange={this.handleChange}
+              disabled={this.state.disabled}/>
+          &nbsp; 21-30
+          </label>
+          <br/>
+          <label>
+            <Radio value="d"
+              checked = {this.state.r === 'd'}
+              onChange={this.handleChange}
+              disabled={this.state.disabled}/>
+          &nbsp; 31-40
+          </label>
+        </p>
+      </div>
+      <div>你选中的：{this.state.r}</div>
+      <p style={{"margin-top": 20}}>
+        <button className="ant-btn ant-btn-primary" style={{"margin-left": 20}} onClick={this.toggle}>toggle disabled</button>
+      </p>
+
+    </div>;
+  }
+});
+React.render(<RadioGroup/>, container);
+````

components/radio/index.jsx

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

components/radio/index.md

@@ -0,0 +1,23 @@
+# radio
+
+- category: Components
+- chinese: 单选框
+
+---
+
+多选框。
+
+## 何时使用
+
+-  `radio` 一般用于选中单个状态，需要和提交操作配合。
+
+## API
+
+### Checkbox
+
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+|  checked | 指定当前是否选中 | boolean  |   | false    |
+|  defaultChecked | 初始是否选中 | boolean |  | false |
+|  onChange | 组合时必须 | Function(e:Event) |  |  | |
+|   r|

index.js

@@ -21,7 +21,8 @@ var antd = {
   Table: require('./components/table'),
   Collapse: require('./components/Collapse'),
   message: require('./components/message'),
-  Slider: require('./components/slider')
+  Slider: require('./components/slider'),
+  Radio:require('./components/radio')
 };
 
 module.exports = antd;

package.json

@@ -40,7 +40,8 @@
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0",
-    "rc-checkbox":"~1.0.0"
+    "rc-checkbox":"~1.0.0",
+    "rc-radio":"~2.0.0"
   },
   "devDependencies": {
     "css-animation": "~1.0.3",

style/components/index.less

@@ -23,3 +23,4 @@
 @import "message";
 @import "divider";
 @import "slider";
+@import "radio";

style/components/radio.less

@@ -0,0 +1,96 @@
+@radioWarpPrefixCls: ant-radio;
+@radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner";
+@duration:.3s;
+
+/* 一般状态 */
+.@{radioWarpPrefixCls} {
+  white-space: nowrap;
+  outline: none;
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle;
+  &:hover {
+    .@{radioInnerPrefixCls} {
+      border-color: #bcbcbc;
+    }
+  }
+  &-inner {
+    &:after {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      left: 3px;
+      top:3px;
+      border-radius: 6px;
+      display: table;
+      border-top: 0;
+      border-left: 0;
+      content: ' ';
+      background-color: #3dbcf6;
+      transform: scale(0);
+      -webkit-transform: scale(0);
+      opacity: 0;
+      transition: transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
+      -webkit-transition: -webkit-transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
+    }
+
+    position: relative;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 14px;
+    border-color: #d9d9d9;
+    background-color: #ffffff;
+    transition: border-color @duration @ease-in-out-circ, background-color @duration @ease-in-out-circ;
+  }
+
+  &-input {
+    position: absolute;
+    left: 0;
+    z-index: 9999;
+    cursor: pointer;
+    opacity: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+/* 选中状态 */
+.@{radioWarpPrefixCls}-checked {
+
+  .@{radioInnerPrefixCls} {
+    border-color: #d9d9d9;
+    &:after {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 1;
+      transition: transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
+      -webkit-transition: -webkit-transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
+    }
+  }
+}
+
+.@{radioWarpPrefixCls}-disabled {
+  &:hover {
+    .@{radioInnerPrefixCls} {
+      border-color: #d9d9d9;
+    }
+  }
+  .@{radioInnerPrefixCls} {
+    border-color: #d9d9d9;
+    background-color: #f3f3f3;
+    &:after {
+      background-color: #cccccc;
+    }
+  }
+
+  .@{radioInnerPrefixCls}-input {
+    cursor: default;
+  }
+}