# Picker demo

* order: 0

基本用法

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Button from 'nuke-button';
import Picker from 'nuke-picker';
import { isWeb, appInfo } from 'nuke-env';

import { StyleProvider } from 'nuke-theme-provider';

const isAndroid = appInfo.platform.toLowerCase() === 'android';
let md = {
  Core: {
    [`color-brand1-6`]: '#1A9CB7'
  },
  Picker: {
    'bottom-button-bg-color': '#ff6600',
    'item-text-color': '#1e1e1e',
    'toolbar-title-color': '#202020'
  }
};
let data0 = ['Rick', 'Morty', 'Hulk', 'Iron Man'];

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      selected: 1
    };
  }

  press() {
    Picker.show(
      {
        title: 'Select Quantity',
        dataSource: data0,
        selectedKey: this.state.selected,
        hasBottomButton: true,
        hasToolbar: true,
        locale: {
          confirm: 'yes',
          cancel: 'no'
        }
      },
      result => {
        this.setState({
          data: data0[result.data],
          selected: result.data
        });
      },
      e => {
        // debugger;
        console.log('canceled');
      }
    );
  }

  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: isAndroid }}>
        <Page title="Picker">
          <View style={styles.result}>
            {this.state.data ? (
              <Text style={styles.resultText}>
                Your choice is : {this.state.data}
              </Text>
            ) : null}
          </View>
          <View style={styles.btns}>
            <Button
              style={styles.btn}
              block
              onPress={this.press.bind(this)}
              type="primary"
            >
              open
            </Button>
          </View>
        </Page>
      </StyleProvider>
    );
  }
}

const styles = {
  result: {
    height: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultText: {
    fontSize: '28rem'
  },
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '30rem'
  }
};

render(<Demo />);
```