feat(UI组件模块): 添加badge模块

src/app/simple/badge/badge.component.html

@@ -0,0 +1,5 @@
+<span class="badge-status-dot badge-status-{{status}}" *ngIf="status" [ngStyle]="_statusSize"></span><ng-template *ngIf="content" [ngTemplateOutlet]="content"></ng-template>
+<sup *ngIf="_count !== undefined" [ngStyle]="simStyle" [class.badge-count]="_count !== null" [class.badge-blink]="blink" [class.badge-dot]="_count === null">
+  <ng-template [ngIf]="count<=overflowCount">{{ count }}</ng-template>
+  <ng-template [ngIf]="count>overflowCount">{{ overflowCount }}+</ng-template>
+</sup>

src/app/simple/badge/badge.component.scss

@@ -0,0 +1,95 @@
+@import '../../../assets/scss/default.scss';
+.sim-badge{
+    position: relative;
+    &-status{
+        .badge-status-dot{
+            width: 8px;
+            height: 8px;
+            display: inline-block;
+            border-radius: 50%;   
+        }
+        .badge-status-success {
+            background-color: $success-color;
+        }
+        .badge-status-processing {
+            background-color: $primary-color;
+            position: relative;
+            &:after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 1px solid $primary-color;
+                animation: statusProcessing 1.2s infinite ease-in-out;
+            }
+        }
+        .badge-status-error {
+            background-color: $danger-color;
+        }
+            .badge-status-default {
+                background-color: $default-border-color;
+        }
+            .badge-status-warning {
+                background-color: $warning-color;
+        }
+    }
+    .badge-dot {
+        position: absolute;
+        transform: translateX(-50%);
+        transform-origin: 0 center;
+        top: -4px;
+        height: 8px;
+        width: 8px;
+        border-radius: 100%;
+        background: $danger-color;
+        z-index: 10;
+        box-shadow: 0 0 0 1px $default-color;
+    }
+    .badge-count {
+        position: absolute;
+        transform: translateX(-50%);
+        top: -10px;
+        height: 20px;
+        border-radius: 10px;
+        min-width: 20px;
+        background: $danger-color;
+        color: $default-color;
+        line-height: 20px;
+        text-align: center;
+        padding: 0 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        transform-origin: -10% center;
+        box-shadow: 0 0 0 1px $default-color;
+    }
+    &:hover{
+        .badge-blink{
+            animation-play-state: paused;
+            animation: none;
+        }
+    }
+    .badge-blink {
+        animation: badgeBlink 1s step-start 0s infinite;
+        animation-fill-mode: initial;
+    }
+}
+
+@keyframes statusProcessing {
+    0% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    100% {
+        transform: scale(2.4);
+        opacity: 0;
+    }
+}
+
+@keyframes badgeBlink {
+    50% {
+        opacity: 0;
+    }
+}

src/app/simple/badge/badge.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BadgeComponent } from './badge.component';
+
+describe('BadgeComponent', () => {
+  let component: BadgeComponent;
+  let fixture: ComponentFixture<BadgeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BadgeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/simple/badge/badge.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, HostBinding, Input, ContentChild, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+export type statusType = 'success' | 'processing' | 'default' | 'error' | 'warning';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'sim-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class BadgeComponent implements OnInit {
+  _statusSize: any;
+  @HostBinding('class.sim-badge') true;
+  @ContentChild('content') content: TemplateRef<void>;
+  // 上线溢出最大值 超过按99+显示
+  @Input() overflowCount = 99;
+  @Input() simStyle: any;
+  // 是否闪动效果
+  @Input() blink: boolean;
+  @Input()
+  set size(value: number | string) {
+    // 如果字符串转数字失败，就赋值为null
+    const number = parseInt((value as string), 10);
+    if (!isNaN(number)) {
+      if (6 > number || number > 12) {
+        throw Error('size value set 6~12');
+      }
+      this._statusSize = {
+        width: `${number}px`,
+        height: `${number}px`
+      };
+    }
+  }
+
+
+  /** 状态 */
+  @Input() @HostBinding('class.sim-badge-status') status: statusType;
+  /** 计数 */
+  _count: string | number | null;
+  @Input()
+  set count(value: string | number | null) {
+    // 如果传进来是null就是dot
+    if (value === null || value === 'null') {
+      this._count = null;
+      return;
+    }
+    // 如果字符串转数字失败，就赋值为null
+    const number = parseInt((value as string), 10);
+    if (isNaN(number)) {
+      this._count = null;
+      return;
+    }
+    if (number < 0) {
+      this._count = 0;
+    } else {
+      this._count = number;
+    }
+  }
+  get count(): string | number | null {
+    return this._count;
+  }
+  @HostBinding('class.sim-badge-dot')
+  get _setBadgeDot() {
+    return this._count === null;
+  }
+  @HostBinding('class.sim-badge-count')
+  get _setBadgeCount() {
+    return this._count !== null;
+  }
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/simple/badge/badge.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BadgeComponent } from './badge.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [BadgeComponent],
+  exports: [BadgeComponent]
+})
+export class BadgeModule { }

src/app/simple/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge.module';