nuke-biz-snack-bar

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

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 />);