weex-nuke/lib/node_modules/nuke-dialog/docs/custom.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Dialog demo

- order: 1

内容超长可滚动

---

````js

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ScrollView from 'nuke-scroll-view';
import Dialog from 'nuke-dialog';
import Button  from 'nuke-button';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    showModal = () => {
        this.refs.modal1.wrappedInstance.show();
    }
    hideModal = () => {
        this.refs.modal1.wrappedInstance.hide();
    }
    hideModalAndConfirm = () =>{
        console.log('confirm')
        this.refs.modal1.wrappedInstance.hide();
    }
    onShow = () => {
        console.log('modal show');
    }

    onHide = () => {
        console.log('modal hide');
    }
    onMaskPress = () => {
        this.refs.modal1.wrappedInstance.hide();
    }

    render() {
        return (
            <ScrollView style={styles.wrapper}>
                <View style={{height:2000}}>
                    <Button type="primary" style={{marginTop:200}} onPress={this.showModal}>页面可滚动，对话框可滚动，点击打开对话框</Button>
                </View>
                <Dialog ref="modal1" duration={1000}  maskStyle={styles.mask} contentStyle={styles.modalStyle} onShow={this.onShow} onHide={this.onHide} onMaskPress={this.onMaskPress}>
                
                    <View style={styles.body}>
                    <ScrollView style={styles.contentScroller}>
                        <View style={styles.head}><Text style={styles.textHead}>擅长话题</Text></View>
                        <View style={styles.topicsWrap}>
                            <View style={styles.topics}><Text style={styles.text}>话题1</Text><Text style={styles.text}>话题2</Text></View>
                            <View style={styles.topics}><Text style={styles.text}>话题3</Text><Text style={styles.text}>话题4</Text></View>
                        </View>
                        <View style={styles.head}><Text style={styles.textHead}>擅长话题</Text></View>
                        <View style={styles.topicsWrap}>
                            <View style={styles.topics}><Text style={styles.text}>话题1</Text><Text style={styles.text}>话题2</Text></View>
                            <View style={styles.topics}><Text style={styles.text}>话题3</Text><Text style={styles.text}>话题4</Text></View>
                        </View>
                        <View style={styles.head}><Text style={styles.textHead}>擅长话题</Text></View>
                        <View style={styles.topicsWrap}>
                            <View style={styles.topics}><Text style={styles.text}>话题1</Text><Text style={styles.text}>话题2</Text></View>
                            <View style={styles.topics}><Text style={styles.text}>话题3</Text><Text style={styles.text}>话题4</Text></View>
                        </View>
                        </ScrollView>
                    </View>
                    <View style={styles.footer}>
                        <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={this.hideModalAndConfirm}>确定</Button>

                    </View>

                </Dialog>

            </ScrollView>

        );
    }
}
var styles = {
  wrapper: {
    paddingLeft: '24rem',
    paddingRight: '24rem',
    paddingTop: '24rem',
    backgroundColor:'#f4f4f4'
  },
  click: {
    height: '100rem',
    lineHeight: '100rem',
    textAlign: 'center',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#ccc'
  },
  mask:{
    backgroundColor:'transparent'// 可以修改默认的灰底
  },
  modalStyle: {
    width: '750rem',
    position:'absolute',
    bottom:0,
    left:0,
    height: '364rem',
    borderRadius:'8rem',
  },
  body: {
    flex:1,
    paddingLeft:40,
    paddingRight:40,
    paddingTop:30,
    borderRadius:'8rem',
    backgroundColor: '#ffffff',
  },
  contentScroller: {
    height:300,
    
  },
  head:{
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor:'#eeeeee',
    borderBottomStyle:'solid',
    borderBottomWidth:'1rem',
  },
  textHead:{
    color:'#3d4145',
    fontSize:32,
  },
  topicsWrap:{

  },
  topics:{
    padding:'10rem',
    flexDirection:'row',


  },
  text:{
    fontSize:'28rem',
    padding:'10rem',
    color:'#3089dc',
    borderColor:'#3089dc',
    borderStyle:'solid',
    borderWidth:'1rem',
    marginRight:'20rem'
  },
  footer: {
    borderTopColor:'#dddddd',
    flexDirection:'row',
    borderTopStyle:'solid',
    borderTopWidth:1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    height: '94rem'
  },
  dlgBtn:{
    flex:1,
  },
  dlgBtnSeperator:{
    color:'#dddddd'
  }

};
render(<App/>);


````