NoticeBar通告栏

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

规则

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

代码演示

基本用法

最简单的用法。

import { Component } from '@angular/core';
@Component({
  selector: 'demo-notice-bar-basic',
  template: `
    <NoticeBar [option]="{'content': '我是小黄条，小黄条的小，小黄条的黄，小黄条的条，请多多关照！！！', 'font': '14px'}">
    </NoticeBar>
    <NoticeBar [option]="{'content': '我是小黄条，小黄条的小，小黄条的黄！！！', 'font': '14px', mode: 'link'}" (onClick)="onClick()">
    </NoticeBar>
    <NoticeBar [option]="{'content': '我是小黄条，小黄条的小，小黄条的黄！！！', 'icon': null, mode: 'closable'}">
    </NoticeBar>
    <NoticeBar [option]="{'content': '我是小黄条，小黄条的小，小黄条的黄，小黄条的条，请多多关照！！！', 'icon': icon, mode: 'closable'}"
               (onClick)="onClick()"
    >
      <ng-template #icon>
        <Icon [type]="'check-circle-o'" [size]="'xxs'"></Icon>
      </ng-template>
    </NoticeBar>
    <NoticeBar [option]="{'content': '我是小黄条，小黄条的小，小黄条的黄，小黄条的条，请多多关照！！！', 'action': action, mode: 'closable'}"
    >
      <ng-template #action>
        <div style="color: #a1a1a1">不再提示</div>
      </ng-template>
    </NoticeBar>
    <NoticeBar [option]="{'content': '我是小黄条，小黄条的小，小黄条的黄，小黄条的条，请多多关照！！！', 'action': action1, mode: 'link'}"
    >
      <ng-template #action1>
        <div>去看看</div>
      </ng-template>
    </NoticeBar>
  `
})
export class DemoNoticeBarBasicComponent {
  onClick() {
    console.log('1');
  }
}

API

option 公告栏参数