nuke-biz-custom-toast

CustomToast

• category: UI
• chinese: 图标
• type: UI组件

何时使用

需要定制 toast 的文案、Icon 时

API

参数	说明	类型	默认值
type	浮层类型，枚举可选'success','error','warning'	string	'success'
message	文案	string	无
onHide	关闭时触发回调	function
onShow	打开后后触发回调	function	false
maxLines	文字最大行数，默认3，建议不要改	number	3
duration	toast 出现多久后消失，默认2s	number	2000

demo

/** @jsx createElement */
import {createElement, Component,render } from 'rax';
import {View,Text,Page,Button} from 'weex-nuke';
import CustomToast from 'nuke-biz-custom-toast';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.closeHandler = this.closeHandler.bind(this);
    this.showToast = this.showToast .bind(this);
  }
  showToast(){
    this.toast.wrappedInstance.show();
  }
  closeHandler(){
    console.log('toast closed');
  }
  render() {
    return (
      <Page title="custom-toast">
          <Page.Intro main="basic" sub="basic-sub"/>
          <Button onPress={this.showToast} type="primary">点我</Button>
          <CustomToast
            defaultVisible={false}
            ref={(n)=>{this.toast = n;}}
            message={'Thank you for your feedback!'}
            icon={{
              source:
                '//img.alicdn.com/tfs/TB1k.IIPVXXXXcWapXXXXXXXXXX-200-200.png',
              style: {
                width: '40rem',
                height: '40rem',
              },
            }}
            onHide={this.closeHandler}
          />
      </Page>
    );
  }
}

render(<App/>);