SnackBar

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

何时使用

materialdesign 风格提示框，类似于 toast

API

| 参数 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------ | ------- | ------ | | bottom | 距离底部距离 | number | 0 | | message | 文案 | string | 无 | | duration | toast 出现多久后消失，默认 5 s | number | 5000 | | actionText | 按钮文本，如果不传则不展示按钮 | string | 无 | | action | 按钮点击回调 | boolean | false | | defaultVisible | 默认是否显示 | boolean | false | | maxLines | 最大行数 | | number | 2 |

Breaking Change

由于第一版 SnackBar 阻塞用户其他行为，这与设计不符。在新版本中，不再使用 Mask。

demo

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import { View, Text, Page, Button } from 'weex-nuke';
import SnackBar from 'nuke-biz-snack-bar';

const short1 = 'Thank you for your feedback!';
const short2 =
  'Successfully added to the cart Thank for your feedbac Successfully added to the cart Successfully added to the cart';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      visible: false,
      message: short1
    };
    this.showBar = this.showBar.bind(this);
    this.hideBar = this.hideBar.bind(this);
    this.changeMessage = this.changeMessage.bind(this);
  }
  showBar() {
    this.refs.snackbar.wrappedInstance.show();
  }

  hideBar() {
    this.refs.snackbar.wrappedInstance.hide();
  }
  changeMessage() {
    this.setState({ message: this.state.message === short1 ? short2 : short1 });
  }
  render() {
    return (
      <Page title="SnackBar">
        <Page.Intro main="basic" sub="basic-sub" />
        <Button onPress={this.showBar} type="primary">
          click me
        </Button>
        <Button onPress={this.changeMessage} type="primary">
          changeMessage
        </Button>
        <SnackBar
          message={this.state.message}
          bottom={80}
          ref="snackbar"
          defaultVisible={true}
          actionText={'DISMISS'}
          action={this.hideBar}
        />
      </Page>
    );
  }
};

render(<App />);