feat(module:tag): borderless mode (#8320)

* feat(module:tag): borderless mode * feat(module:tag): borderless mode * feat(module:tag): borderless mode * feat(module:tag): borderless mode * feat(module:tag): borderless mode
NG-ZORRO · Jan 17, 2024 · e428083 · e428083
1 parent 66a88db
commit e428083
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 0 deletions.
diff --git a/components/tag/demo/borderless.md b/components/tag/demo/borderless.md
@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 无边框
+  en-US: Borderless
+---
+
+## zh-CN
+
+无边框模式。
+
+## en-US
+
+borderless.
diff --git a/components/tag/demo/borderless.ts b/components/tag/demo/borderless.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { presetColors } from 'ng-zorro-antd/core/color';
+
+@Component({
+  selector: 'nz-demo-tag-borderless',
+  template: `
+    <ng-container *ngFor="let color of tagColors">
+      <nz-tag [nzColor]="color" [nzBordered]="false">{{ color }}</nz-tag>
+    </ng-container>
+  `
+})
+export class NzDemoTagBorderlessComponent {
+  public tagColors = presetColors;
+}
diff --git a/components/tag/doc/index.en-US.md b/components/tag/doc/index.en-US.md
@@ -26,5 +26,6 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
 | `[nzMode]`          | Mode of tag                                                                 | `'closeable' \| 'default' \| 'checkable'` | `'default'` |
 | `[nzChecked]`       | Checked status of Tag, double binding, only works when `nzMode="checkable"` | `boolean`                                 | `false`     |
 | `[nzColor]`         | Color of the Tag                                                            | `string`                                  | -           |
+| `[nzBordered]`      | Whether has border style                                                    | `boolean`                                 | `true`      |
 | `(nzOnClose)`       | Callback executed when tag is closed, only works when `nzMode="closable"`   | `EventEmitter<MouseEvent>`                | -           |
 | `(nzCheckedChange)` | Checked status change call back, only works when `nzMode="checkable"`       | `EventEmitter<boolean>`                   | -           |
diff --git a/components/tag/doc/index.zh-CN.md b/components/tag/doc/index.zh-CN.md
@@ -26,5 +26,6 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
 | `[nzMode]`          | 设定标签工作的模式                                             | `'closeable' \| 'default' \| 'checkable'` | `'default'` |
 | `[nzChecked]`       | 设置标签的选中状态，可双向绑定，在 `nzMode="checkable"` 时可用 | `boolean`                                 | `false`     |
 | `[nzColor]`         | 标签色                                                         | `string`                                  | -           |
+| `[nzBordered]`      | 是否有边框                                                     | `boolean`                                 | `true`      |
 | `(nzOnClose)`       | 关闭时的回调，在 `nzMode="closable"` 时可用                    | `EventEmitter<MouseEvent>`                | -           |
 | `(nzCheckedChange)` | 设置标签的选中状态的回调，在 `nzMode="checkable"` 时可用       | `EventEmitter<void>`                      | -           |
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
@@ -94,6 +94,11 @@
       background: @@lightColor;
       border-color: @@lightBorderColor;
     }
+
+    &-borderless {
+      border-color: transparent;
+    }
+
     &-@{color}-inverse {
       color: @text-color-inverse;
       background: @@darkColor;

diff --git a/components/tag/tag.component.ts b/components/tag/tag.component.ts
@@ -60,6 +60,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-tag-checkable]': `nzMode === 'checkable'`,
     '[class.ant-tag-checkable-checked]': `nzChecked`,
     '[class.ant-tag-rtl]': `dir === 'rtl'`,
+    '[class.ant-tag-borderless]': `!nzBordered`,
     '(click)': 'updateCheckedStatus()'
   },
   imports: [NzIconModule, NgIf],
@@ -71,6 +72,7 @@ export class NzTagComponent implements OnChanges, OnDestroy, OnInit {
   @Input() nzMode: 'default' | 'closeable' | 'checkable' = 'default';
   @Input() nzColor?: string | NzStatusColor | NzPresetColor;
   @Input() @InputBoolean() nzChecked = false;
+  @Input() @InputBoolean() nzBordered = true;
   @Output() readonly nzOnClose = new EventEmitter<MouseEvent>();
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
   dir: Direction = 'ltr';

diff --git a/components/tag/tag.spec.ts b/components/tag/tag.spec.ts
@@ -98,6 +98,12 @@ describe('tag', () => {
       fixture.detectChanges();
       expect(tag.nativeElement.classList).not.toContain('ant-tag-has-color');
     });
+    it('should have bordered by default', () => {
+      expect(tag.nativeElement.classList).not.toContain('ant-tag-borderless');
+      testComponent.bordered = false;
+      fixture.detectChanges();
+      expect(tag.nativeElement.classList).toContain('ant-tag-borderless');
+    });
   });
   describe('prevent tag', () => {
     let fixture: ComponentFixture<NzTestTagPreventComponent>;
@@ -140,6 +146,7 @@ describe('tag', () => {
       [nzMode]="mode"
       [(nzChecked)]="checked"
       [nzColor]="color"
+      [nzBordered]="bordered"
       (nzCheckedChange)="checkedChange($event)"
       (nzOnClose)="onClose()"
     >
@@ -151,6 +158,7 @@ export class NzTestTagBasicComponent {
   mode = 'default';
   color: string | undefined;
   checked = false;
+  bordered = true;
   onClose = jasmine.createSpy('on close');
   afterClose = jasmine.createSpy('after close');
   checkedChange = jasmine.createSpy('after close');