NoticeBar 通告栏
在导航栏下方,一般用作系统提醒、活动提醒等通知。
规则
- 需要引起用户关注时使用,重要级别低于 Modal ,高于 Toast。
代码演示
通告栏
import { NoticeBar, WhiteSpace } from 'antd-mobile';
const NoticeBarExample = React.createClass({
onClick() {
alert('clicked');
},
render() {
return (
<div>
<WhiteSpace size="lg" />
<NoticeBar type="info">国庆期间余额宝收益和转出到账时间</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar type="success" mode="closable" onClick={this.onClick}>国庆期间余额宝收益和转出到账时间</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar type="error">国庆期间余额宝收益和转出到账时间</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar type="question" mode="link" onClick={this.onClick}>国庆期间余额宝收益和转出到账时间</NoticeBar>
<WhiteSpace size="lg" />
</div>
);
},
});
ReactDOM.render(<NoticeBarExample />, mountNode);
API
成员 | 说明 | 类型 | 默认值 |
---|
mode | 提示类型,可选closable ,link | String | '' |
type | 图标类型,可选success ,error ,info ,question ,warn | String | '' |
onClick | 点击关闭或者操作区域的回调函数 | (): void | |