# Radio

* category component
* type UI

---

[![npm version](https://badge.fury.io/js/nuke-radio.svg)](https://badge.fury.io/js/nuke-radio)

## API

### Radio

| 属性          | 说明                                                                                  | 类型                                       | 默认值 |
| ------------- | ------------------------------------------------------------------------------------- | ------------------------------------------ | ------ |
| checked       | 是否选中 ,group 中的选中不适用该 API，而是通过 value 设置                             | boolean                                    |
| disabled      | 是否禁用                                                                              | boolean                                    | false  |
| size          | 大小                                                                                  | string(small,medium)                       | medium |
| onChange      | 点击造成状态改变时的回调函数，group 使用时，单个 item 上不存在此回调                  | function(checked,e)                        |
| type          | 单选框类型                                                                            | string（'normal' ， 'list','empty','dot'） | normal |
| touchStyle    | 可触摸区域样式                                                                        | object                                     | {}     |
| checkedStyle | 可用于选中态的样式 | object                                |{}
| ignoreContext | 忽略上层父级 context，当 radio.group 的子级存在非 group 模式的 radio 时需设置为 false | bool(false)                                |

`注意：w3c 标准中的 radio 在非受限场景不能取消选中。多个 radio 中单选一个的效果 请参考 Radio.group 使用。具体参考 demo/dataSource.md`

```
<Radio.Group style={styles.groupWrap} onChange = {this.groupChange} value={this.state.group}>
    <View style={styles.demo_item}>
        <Radio size="small"  value="杭州市" type="dot"></Radio>
        <Text>杭州市</Text>
    </View>
    <View style={styles.demo_item}>
        <Radio size="small" value="宁波市" type="dot"></Radio>
        <Text>宁波市</Text>
    </View>
    <View style={styles.demo_item}>
        <Radio size="small" value="温州市" type="dot"></Radio>
        <Text>温州市</Text>
    </View>
    <View style={styles.demo_item}>
        <Radio size="small" value="绍兴市" type="dot"></Radio>
        <Text>绍兴市</Text>
    </View>
</Radio.Group>
```

其中`this.state.group`代表在当前 group 中选择的值如`宁波市`。

### Radio.group

| 属性           | 说明                           | 类型              | 默认值 |
| -------------- | ------------------------------ | ----------------- | ------ |
| value          | 当前选择的值                   | any               | ''     |
| onChange       | 选中值发生改变后的回调         | function(value,e) | ()=>{} |
| dataSource     | 可选数据源                     | array             | []     |
| groupItemStyle | group 选择时的 item 外部样式   | object            | {}     |
| reverse        | 反转 label 与 radio 的显示顺序 | bool              | false  |
| renderItem     | 自定义渲染 group 的 item 方法  | function          | ()     |

### 数据源

通过在 dataSource 中声明 label 属性可使 label 整行具备点击效果，使用 renderItem
方法可自定义渲染每一个 radio item。 [参考 datasource.md 以及 renderItem
了解更多]

### 主题替换

radio 组件在 1.0.0 版本后提供主题  换肤功能，具体使用方法可以参考[nuke-theme-provider](https://www.npmjs.com/package/nuke-theme-provider)。

### 主题变量

参考 `theme.md`.

定义换肤变量

```
const theme = {
    Radio:{
        'dot-border-color':'red',
        'dot-checked-border-color':'red',
        'dot-bg-color-selected':'red'
    }
};
```

通过 styleProvider 注入

```
<StyleProvider style={theme}>
    <Radio size="small" type="dot"></Radio>
    <Text>浙江省</Text>
</StyleProvider>
```