NoticeBar 通告栏

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

规则

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

代码演示

通告栏

  1. import { NoticeBar, WhiteSpace, Icon } from 'antd-mobile';
  2. const NoticeBarExample = () => (
  3. <div>
  4. <WhiteSpace size="lg" />
  5. <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 0.15rem' } }}>
  6. Notice: The arrival time of incomes and transfers of Yu &#39;E Bao will be delayed during National Day.
  7. </NoticeBar>
  8. <WhiteSpace size="lg" />
  9. <NoticeBar mode="link" onClick={() => alert('1')}>
  10. Notice: The arrival time of incomes and transfers of Yu &#39;E Bao will be delayed during National Day.
  11. </NoticeBar>
  12. <WhiteSpace size="lg" />
  13. <NoticeBar mode="closable" icon={null}>Remove the default icon.</NoticeBar>
  14. <WhiteSpace size="lg" />
  15. <NoticeBar mode="closable" icon={<Icon type="check-circle-o" size="xxs" />}>
  16. Customized icon.
  17. </NoticeBar>
  18. </div>
  19. );
  20. ReactDOM.render(<NoticeBarExample />, mountNode);

NoticeBar通告栏 - 图1

API

适用平台:WEB、React-Native
属性说明类型默认值
mode提示类型,可选closable,linkString''
iconnotice 前的图标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: {}}