# Radio 单选框

## 使用场景

  多选一时使用

## 案例演示

### Radio 基本使用

---demo
```js
import { Radio } from 'amos-framework';

function onChange(e){
  console.log(e);
}

ReactDOM.render(<Radio value="prop1" onChange={onChange}>属性</Radio>, _react_runner_);
```
---demoend

### Radio Group 基本使用

---demo
```js
import { Radio } from 'amos-framework';

const RadioGroup = Radio.Group;

ReactDOM.render(
  <RadioGroup defaultValue="prop2" onChange={value => console.log(value)}>
    <Radio value="prop1">属性1</Radio>
    <Radio value="prop2">属性2</Radio>
    <Radio value="prop3" disabled>属性3</Radio>
  </RadioGroup>, _react_runner_);
```
---demoend

### Radio Group 统一设置 disabled

---demo
```js
import { Radio } from 'amos-framework';

const RadioGroup = Radio.Group;

ReactDOM.render(
  <RadioGroup defaultValue="prop2" disabled onChange={value => console.log(value)}>
    <Radio value="prop1">属性1</Radio>
    <Radio value="prop2">属性2</Radio>
    <Radio value="prop3" disabled={false}>属性3</Radio>
  </RadioGroup>, _react_runner_);
```
---demoend

### 变异的 radio group 基本使用

---demo
```js
import { Radio, Icon } from 'amos-framework';

const VariantGroup = Radio.VariantGroup;

class CtlDemo extends Component {
  state = {
    value: 'prop2'
  };

  onChange = (value) => {
    this.setState({
      value
    });
  }

  render() {
    const { value } = this.state;
    return (
      <VariantGroup value={value} onChange={this.onChange}>
        <Icon value="prop1" icon="3d-cube" />
        <Icon value="prop2" icon="layers" />
        <Icon value="prop3" icon="3d-rotate" />
      </VariantGroup>
    );
  }
}

const Demo1 = () => (
  <VariantGroup defaultValue="prop2" onChange={value => console.log(value)}>
    <Icon value="prop1" icon="3d-cube" />
    <Icon value="prop2" icon="layers" />
    <Icon value="prop3" icon="3d-rotate" />
  </VariantGroup>
);

ReactDOM.render((
  <div>
    可控：<CtlDemo />
    <p />
    不可控：<Demo1 />
  </div>
), _react_runner_);
```
---demoend

### 使用 vertical 方式

---demo
```js
import { Radio, Icon } from 'amos-framework';

const VariantGroup = Radio.VariantGroup;
const RadioGroup = Radio.Group;


function onChange(e){
  console.log(e);
}

const Demo0 = () => (
  <div>
    <Radio vertical value="prop1" onChange={onChange}>属性1</Radio>
    <Radio vertical value="prop1" onChange={onChange}>属性2</Radio>
    <Radio vertical value="prop1" onChange={onChange}>属性3</Radio>
  </div>
);

const Demo1 = () => (
  <RadioGroup vertical defaultValue="prop2" onChange={onChange}>
    <Radio value="prop1">属性1</Radio>
    <Radio value="prop2">属性2</Radio>
    <Radio value="prop3" disabled>属性3</Radio>
  </RadioGroup>
);

const Demo2 = () => (
  <VariantGroup vertical defaultValue="prop1" onChange={onChange}>
    <Icon value="prop1" icon="3d-cube" />
    <Icon value="prop2" icon="layers" />
    <Icon value="prop3" icon="3d-rotate" />
  </VariantGroup>
);

ReactDOM.render((
  <div style={{ width: 300 }}>
    基本：<Demo0 />
    <p />
    RadioGroup：<Demo1 />
    <p />
    VariantGroup：<Demo2 />
  </div>
), _react_runner_);
```
---demoend

## props

### Radio

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-radio` | css class 前缀 |
| children |  | `` | 内容 |
| className | string | - | 外层label样式名 |
| value | `string or number` | - | 值，如果结合 RadioGroup 使用，与其 value 或 defaultValue 对应 |
| checked | boolean | - | 单独使用时，是否选中，与 RadioGroup 一起使用时无需指定 |
| defaultChecked | boolean | - | 单独使用时，初始是否选中（不可控），与 RadioGroup 一起使用时无需指定 |
| onChange | function | - | 单独使用时，切换选中后的回调，参数为 event 对象，与 RadioGroup 一起使用时无需指定 |
| disabled | boolean | - | 是否禁用 |
| vertical | boolean | - | 是否块级布局 |
| onClick | function | - | 点击label事件 |

### Radio.Group

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-radio-group` | css class 前缀 |
| children |  | - | 内容，仅支持Radio,如果自定义CustomRadio，则需要设置`CustomRadio.__AMOS_RADIO = true` |
| className | string | - | 外层div样式名 |
| value | `string or number` | - | 选中的值 |
| defaultValue | `string or number` | - | 初始化时选中的值（不可控） |
| onChange | function | - | 切换选择后的回调。参数为选中的值 |
| disabled | boolean | - | 是否禁用，统一给所有的 Radio 设置禁用状态，如果某个Child单独设置了disabled，则以单独设置的为准 |
| vertical | boolean | - | 是否块级布局，会给子节点注入相关 vertical 属性, 优先级低于 Radio 中的 vertical |

> 注意：自定义Group的内容时，需要设置 `Custom.__AMOS_RADIO = true`.

### Radio.VariantGroup

变异的单选框，子节点可支持其它类型组件

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| className | string | - | css class |
| children | ReactNode[] | - | VariantGroup 内容 |
| value | string or number | - | 当前值 |
| defaultValue | string or number | - | 同 value，不可控 |
| onChange | function | - | 选中事件，参数返回被选中的值 |
| vertical | boolean | - | 是否块级布局，会给子节点注入相关 vertical 属性 |

> 注意，该组件，与 `Button.Group` 的区别，`Button.Group` 的子节点仅支持 `Button` 组件。