# Switch Demo

- order: 1

---

```js
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Button from 'nuke-button';
import Page from 'nuke-page';
import Switch from 'nuke-switch';
import ThemeProvider from 'nuke-theme-provider';

const { StyleProvider } = ThemeProvider;
let md = {
  Core: {
    [`color-brand1-6`]: '#1A9CB7'
  },
  Switch: {}
};
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      disabled: false
    };
  }
  change = (item, value) => {
    let obj = {};
    obj[item] = value;
    this.setState(obj);
  };
  changeDisable = () => {
    this.setState({
      disabled: !this.state.disabled
    });
  };
  changeNotice = (item, value) => {
    let obj = {};
    obj[item] = value;
    this.setState(obj);
  };
  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: true }}>
        <Page title="Switch">
          <Page.Intro main="disabled" />
          <View style={styles.row}>
            <View style={styles.cellItem}>
              <Switch disabled={this.state.disabled} defaultChecked={true} />
            </View>
          </View>
          <Button onPress={this.changeDisable}>changeDisable</Button>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  row: {
    flexDirection: 'row',
    paddingLeft: 40,
    marginBottom: 30
  },
  cellItem: {
    flex: 1,
    height: 240
  },
  cellResult: {
    flexDirection: 'row'
  },
  text: {
    marginTop: 20,
    fontSize: 24
  },
  label: {
    marginTop: 20,
    fontSize: 24,
    color: '#999999'
  }
};
render(<App />);
```