NoticeBar 通告栏

在导航栏下方，一般用作系统提醒、活动提醒等通知。

规则

  • 需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。

代码演示

可关闭

是否显示关闭按钮，点击关闭图标后，隐藏该栏。 

  1. import { NoticeBar, WhiteSpace } from 'antd-mobile';
  3. const NoticeBarExample = React.createClass({
  4.   onClick() {
  5.     alert('clicked');
  6.   },
  7.   render() {
  8.     return (
  9.       <div>
  10.         <WhiteSpace size="lg" />
  11.         <NoticeBar mode="closable" onClick={this.onClick}>
  12.           国庆期间余额宝收益和转出到账时间1
  13.         </NoticeBar>
  14.         <WhiteSpace size="lg" />
  15.         <NoticeBar type="info" mode="closable">国庆期间余额宝收益和转出到账时间</NoticeBar>
  16.         <WhiteSpace size="lg" />
  17.       </div>
  18.     );
  19.   },
  20. });
  22. ReactDOM.render(<NoticeBarExample />, mountNode);

跳转

是否显示跳转箭头图标，点击之后会跳转到别的页面。 

  1. import { NoticeBar, WhiteSpace } from 'antd-mobile';
  3. function linkClick() {
  4.   // 这里配置跳转
  5. }
  7. const NoticeBarExample = React.createClass({
  8.   render() {
  9.     return (
  10.       <div>
  11.         <WhiteSpace size="lg" />
  12.         <NoticeBar mode="link" onClick={linkClick}>
  13.           国庆期间余额宝收益和转出到账时间
  14.         </NoticeBar>
  15.         <WhiteSpace size="lg" />
  16.         <NoticeBar mode="link" type="info">国庆期间余额宝收益和转出到账时间</NoticeBar>
  17.         <WhiteSpace size="lg" />
  18.       </div>
  19.     );
  20.   },
  21. });
  23. ReactDOM.render(<NoticeBarExample />, mountNode);

图标名称

显示成功, 错误, 信息, 警告, 问题 图标 

  1. import { NoticeBar, WhiteSpace } from 'antd-mobile';
  3. const NoticeBarExample = React.createClass({
  4.   render() {
  5.     return (
  6.       <div>
  7.         <WhiteSpace size="lg" />
  8.         <NoticeBar type="info">国庆期间余额宝收益和转出到账时间</NoticeBar>
  9.         <WhiteSpace size="lg" />
  10.         <NoticeBar type="warn">国庆期间余额宝收益和转出到账时间</NoticeBar>
  11.         <WhiteSpace size="lg" />
  12.         <NoticeBar mode="closable" type="success">国庆期间余额宝收益和转出到账时间</NoticeBar>
  13.         <WhiteSpace size="lg" />
  14.         <NoticeBar type="error">国庆期间余额宝收益和转出到账时间</NoticeBar>
  15.         <WhiteSpace size="lg" />
  16.         <NoticeBar mode="link" type="question">国庆期间余额宝收益和转出到账时间</NoticeBar>
  17.         <WhiteSpace size="lg" />
  18.       </div>
  19.     );
  20.   },
  21. });
  23. ReactDOM.render(<NoticeBarExample />, mountNode);

NoticeBar通告栏 - 图1

API

TabItem

成员说明类型可选值默认值
mode提示类型Stringclosable、link、''''
type图标类型Stringsuccess、error、info、question、warn 、''''
onClick点击关闭或者操作区域的回调函数function