TopNotice 顶部提示

定义／Definition

一般是系统提醒，活动等通知，需要引起用户关注时使用。

规则 / Rule

按需使用

代码演示

可关闭

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

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

跳转

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

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

图标名称

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

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

TopNotice顶部提示 - 图1

API

TabItem

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