# Radio demo

* order: 0

普通用法

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Radio from 'nuke-radio';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: false,
    };
  }

  onChange = () => {
    let tmp = this.state.checked;
    this.setState({
      checked: !tmp,
    });
  };
  onPress() {
    let tmp = this.state.checked;
    this.setState({
      checked: !tmp,
    });
  }
  getChangeResult = value => {
    console.log(value);
  };

  render() {
    return (
      <Page title="Radio">
        <Page.Intro main="Radio" sub="normal" />
        <View style={Styles.demo_item}>
          <Radio />
          <Radio checked={true} />
          <Radio disabled={true} />
          <Radio checked={true} disabled={true} style={ {backgroundImage: `linear-gradient(to right,#ff9a9e,#fad0c4`}} />
        </View>
        <Page.Intro sub="dot" />
        <View style={Styles.demo_item}>
          <Radio type="dot" />
          <Radio type="dot" checked={true} />
          <Radio type="dot" disabled={true} />
          <Radio type="dot" checked={true} disabled={true} />
        </View>

        <Page.Intro sub="empty" />
        <View style={Styles.demo_item}>
          <Radio type="empty" />
          <Radio type="empty" checked={true} />
          <Radio type="empty" disabled={true} />
          <Radio type="empty" checked={true} disabled={true} />
        </View>

        <Page.Intro sub="list" />
        <View style={Styles.demo_item}>
          <Radio type="list" />
          <Radio type="list" checked={true} />
          <Radio type="list" disabled={true} />
          <Radio type="list" checked={true} disabled={true} />
        </View>
        <Page.Intro sub="size" />
        <View style={Styles.demo_item}>
          <Radio size="small" />
          <Radio size="small" checked={true} />
          <Radio  />
          <Radio  checked={true} />
        </View>
        <Page.Intro main="custom"/>
        <View style={Styles.demo_item}>
          
          <Radio
            size="small"
            checked={true}
            disabled={true}
            disabledStyle={{ color: 'red', borderColor: 'red' }}
            type="dot"
          />
          <Radio
            defaultChecked={true}
            type="dot"
            style={{ color: 'blue', borderColor: 'blue' }}
            checkedStyle={{ color: 'red', borderColor: 'red' }}
          />
        </View>
      </Page>
    );
  }
};
const Styles = {
  demo_item: {
    height: 104,
    marginBottom: 30,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 22,
  },
  demo_result: {
    backgroundColor: '#ffffff',
    paddingLeft: 32,
    height: 60,
    justifyContent: 'center',
    color: '#666666',
  },
};
render(<App />);
```