diff --git a/components/tag/demo/status.md b/components/tag/demo/status.md new file mode 100644 index 00000000000..0d041dc31d5 --- /dev/null +++ b/components/tag/demo/status.md @@ -0,0 +1,14 @@ +--- +order: 7 +title: + zh-CN: 预设状态的标签 + en-US: Status Tag +--- + +## zh-CN + +预设五种状态颜色,可以通过设置 `nzColor` 为 `success`、 `processing`、`error`、`default`、`warning` 来代表不同的状态。 + +## en-US + +We preset five different colors, you can set `nzColor` property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status. \ No newline at end of file diff --git a/components/tag/demo/status.ts b/components/tag/demo/status.ts new file mode 100644 index 00000000000..ba1edf0592a --- /dev/null +++ b/components/tag/demo/status.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-tag-status', + template: ` + success + processing + error + default + warning + ` +}) +export class NzDemoTagStatusComponent {} diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts index 44aa0709f2b..9977152a5d7 100644 --- a/components/tag/nz-tag.component.ts +++ b/components/tag/nz-tag.component.ts @@ -53,7 +53,11 @@ export class NzTagComponent implements OnInit, OnChanges { if (!color) { return false; } - return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color); + + return ( + /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color) || + /^(success|processing|error|default|warning)$/.test(color) + ); } private updateClassMap(): void { diff --git a/components/tag/nz-tag.spec.ts b/components/tag/nz-tag.spec.ts index 031d7879e19..325965db33f 100644 --- a/components/tag/nz-tag.spec.ts +++ b/components/tag/nz-tag.spec.ts @@ -74,6 +74,19 @@ describe('tag', () => { expect(tag.nativeElement.classList).toContain('ant-tag-green'); expect(tag.nativeElement.style.backgroundColor).toBe(''); }); + + it('should status color work', () => { + fixture.detectChanges(); + testComponent.color = 'success'; + fixture.detectChanges(); + expect(tag.nativeElement.classList).toContain('ant-tag-success'); + testComponent.color = 'processing'; + fixture.detectChanges(); + expect(tag.nativeElement.classList).toContain('ant-tag-processing'); + testComponent.color = 'invalid'; + fixture.detectChanges(); + expect(tag.nativeElement.classList).not.toContain('ant-tag-invalid'); + }); it('issues #1176', () => { testComponent.color = 'green'; fixture.detectChanges();