NoticeBar 通告栏
在导航栏下方,一般用作系统提醒、活动提醒等通知。
规则
- 需要引起用户关注时使用,重要级别低于 Modal ,高于 Toast。
代码演示
通告栏
import { NoticeBar, WhiteSpace, Icon } from 'antd-mobile';
const NoticeBarExample = () => (
<div>
<WhiteSpace size="lg" />
<NoticeBar marqueeProps={{ loop: true, style: { padding: '0 0.15rem' } }}>
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="link" onClick={() => alert('1')}>
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="closable" icon={null}>Remove the default icon.</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="closable" icon={<Icon type="check-circle-o" size="xxs" />}>
Customized icon.
</NoticeBar>
</div>
);
ReactDOM.render(<NoticeBarExample />, mountNode);
API
适用平台:WEB、React-Native
属性 | 说明 | 类型 | 默认值 |
---|
mode | 提示类型,可选closable ,link | String | '' |
icon | notice 前的图标 | React.Element | <Icon type={require('./trips.svg')} size="xxs" /> |
onClick | 点击关闭或者操作区域的回调函数 | (): void | |
marqueeProps (web only ) | marquee 参数 | Object | {loop: false, leading: 500, trailing: 800, fps: 40, style: {}} |