项目初始化

src/app/shared/components/status-label/index.en-US.md

@@ -0,0 +1,23 @@
+---
+order: 10
+title: status-label
+type: Component
+---
+
+Status label, [DEMO](https://preview.ng-alain.com/ms/#/dns/domain)。
+
+## DEMO
+
+```html
+<status-label>Normal</status-label>
+<status-label type="error" text="Error"></status-label>
+<span status-label type="error" text="Error"></span>
+```
+
+## API
+
+| Property | Description                             | Type                    | Default   |
+| -------- | --------------------------------------- | ----------------------- | --------- |
+| `[type]` | Type of status label                    | `success,error,warning` | `success` |
+| `[icon]` | Whether show icon                       | `boolean`               | `true`    |
+| `[text]` | Text of status label, or `[ng-content]` | `string`                | -         |

src/app/shared/components/status-label/index.ts

@@ -0,0 +1,2 @@
+export * from './status-label.component';
+export * from './status-label.module';

src/app/shared/components/status-label/index.zh-CN.md

@@ -0,0 +1,23 @@
+---
+order: 10
+title: status-label
+type: Component
+---
+
+状态标签，参考[示例](https://preview.ng-alain.com/ms/#/dns/domain)。
+
+## DEMO
+
+```html
+<status-label>Normal</status-label>
+<status-label type="error" text="Error"></status-label>
+<span status-label type="error" text="Error"></span>
+```
+
+## API
+
+| 参数     | 说明                    | 类型                    | 默认值    |
+| -------- | ----------------------- | ----------------------- | --------- |
+| `[type]` | 类型                    | `success,error,warning` | `success` |
+| `[icon]` | 是否显示图标            | `boolean`               | `true`    |
+| `[text]` | 文本，或 `[ng-content]` | `string`                | -         |

src/app/shared/components/status-label/status-label.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
+import { BooleanInput, InputBoolean } from '@delon/util';
+
+@Component({
+  selector: 'status-label, [status-label]',
+  template: `
+    <i *ngIf="icon" nz-icon [nzType]="iconType" class="pr-xs"></i>
+    {{ text }}
+    <ng-content></ng-content>
+  `,
+  host: {
+    '[class.text-success]': `_t=='success'`,
+    '[class.text-error]': `_t=='error'`,
+    '[class.text-orange]': `_t=='warning'`
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StatusLabelComponent implements OnChanges {
+  static ngAcceptInputType_icon: BooleanInput;
+
+  _t?: string;
+
+  iconType!: string;
+
+  @Input()
+  set type(v: 'success' | 'error' | 'warning') {
+    let iconType: string;
+    switch (v) {
+      case 'success':
+        iconType = 'check-circle';
+        break;
+      case 'error':
+        iconType = 'close-circle';
+        break;
+      case 'warning':
+      default:
+        iconType = 'exclamation-circle';
+        break;
+    }
+    this._t = v;
+    this.iconType = iconType;
+  }
+
+  @Input() @InputBoolean() icon = true;
+
+  @Input() text?: string;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    this.type = 'success';
+  }
+
+  ngOnChanges(): void {
+    this.cdr.detectChanges();
+  }
+}

src/app/shared/components/status-label/status-label.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+import { StatusLabelComponent } from './status-label.component';
+
+const COMPONENTS = [StatusLabelComponent];
+
+@NgModule({
+  imports: [CommonModule, NzIconModule],
+  declarations: COMPONENTS,
+  exports: COMPONENTS
+})
+export class StatusLabelModule {}