feat(module:tabs): support for start and end extra content (#9097)

Author: HyperLife1119

components/tabs/demo/extra.md

@@ -7,11 +7,8 @@ title:
 
 ## zh-CN
 
-可以在页签右边添加附加操作。
+可以在页签两边添加附加操作。
 
 ## en-US
 
-You can add extra actions to the right of Tabs.
-
-
-
+You can add extra actions to the start or end or even both sides of Tabs.

components/tabs/demo/extra.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 
 @Component({
   selector: 'nz-demo-tabs-extra',
-  imports: [NzButtonModule, NzTabsModule],
+  imports: [NzButtonModule, NzTabsModule, NzCheckboxModule, FormsModule],
   template: `
     <nz-tabset [nzTabBarExtraContent]="extraTemplate">
       @for (tab of tabs; track tab) {
@@ -15,8 +17,34 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
     <ng-template #extraTemplate>
       <button nz-button>Extra Action</button>
     </ng-template>
+
+    <br />
+    <br />
+    <p>You can also specify its direction or both side</p>
+    <br />
+    <nz-checkbox-group [nzOptions]="positionOptions" [(ngModel)]="positions" />
+    <br />
+    <br />
+
+    <nz-tabset>
+      @if (positions.includes('start')) {
+        <button *nzTabBarExtraContent="'start'" nz-button [style.margin-right.px]="16">Start Extra Action</button>
+      }
+      @if (positions.includes('end')) {
+        <button *nzTabBarExtraContent="'end'" nz-button [style.margin-left.px]="16">End Extra Action</button>
+      }
+
+      @for (tab of tabs; track tab) {
+        <nz-tab [nzTitle]="'Tab ' + tab">Content of tab {{ tab }}</nz-tab>
+      }
+    </nz-tabset>
   `
 })
 export class NzDemoTabsExtraComponent {
   tabs = [1, 2, 3];
+  positionOptions = [
+    { label: 'start', value: 'start' },
+    { label: 'end', value: 'end' }
+  ];
+  positions = ['start', 'end'];
 }

components/tabs/doc/index.en-US.md

@@ -107,3 +107,11 @@ Show a link in tab's head. Used in router link mode.
   </nz-tab>
 </nz-tabset>
 ```
+
+### [nzTabBarExtraContent]
+
+> Note: `*nzTabBarExtraContent` has a higher priority than `nz-tabset[nzTabBarExtraContent]`.
+
+| Property                 | Description               | Type               | Default | Global Config |
+| ------------------------ | ------------------------- | ------------------ | ------- | ------------- |
+| `[nzTabBarExtraContent]` | Position of extra content | `'start' \| 'end'` | `'end'` |

components/tabs/doc/index.zh-CN.md

@@ -110,3 +110,11 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
   </nz-tab>
 </nz-tabset>
 ```
+
+### [nzTabBarExtraContent]
+
+> 注意：`*nzTabBarExtraContent` 比 `nz-tabset[nzTabBarExtraContent]` 具有更高的优先级。
+
+| 参数                     | 说明           | 类型               | 默认值  |
+| ------------------------ | -------------- | ------------------ | ------- |
+| `[nzTabBarExtraContent]` | 附加内容的位置 | `'start' \| 'end'` | `'end'` |

components/tabs/public-api.ts

@@ -3,17 +3,18 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+export * from './interfaces';
 export { NzTabAddButtonComponent as ɵNzTabAddButtonComponent } from './tab-add-button.component';
-export { NzTabsInkBarDirective as ɵNzTabsInkBarDirective } from './tabs-ink-bar.directive';
+export * from './tab-bar-extra-content.directive';
+export { NzTabBodyComponent as ɵNzTabBodyComponent } from './tab-body.component';
+export { NzTabCloseButtonComponent as ɵNzTabCloseButtonComponent } from './tab-close-button.component';
+export * from './tab-link.directive';
 export { NzTabNavBarComponent as ɵNzTabNavBarComponent } from './tab-nav-bar.component';
 export { NzTabNavItemDirective as ɵNzTabNavItemDirective } from './tab-nav-item.directive';
-export { NzTabBodyComponent as ɵNzTabBodyComponent } from './tab-body.component';
 export { NzTabNavOperationComponent as ɵNzTabNavOperationComponent } from './tab-nav-operation.component';
 export { NzTabScrollListDirective as ɵNzTabScrollListDirective } from './tab-scroll-list.directive';
-export { NzTabCloseButtonComponent as ɵNzTabCloseButtonComponent } from './tab-close-button.component';
 export * from './tab.component';
 export * from './tab.directive';
-export * from './tab-link.directive';
+export { NzTabsInkBarDirective as ɵNzTabsInkBarDirective } from './tabs-ink-bar.directive';
 export * from './tabs.module';
 export * from './tabset.component';
-export * from './interfaces';

components/tabs/tab-bar-extra-content.directive.ts

@@ -0,0 +1,14 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Directive, inject, input, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[nzTabBarExtraContent]:not(nz-tabset)'
+})
+export class NzTabBarExtraContentDirective {
+  readonly position = input<'start' | 'end'>('end', { alias: 'nzTabBarExtraContent' });
+  readonly templateRef = inject(TemplateRef);
+}

components/tabs/tab-nav-bar.component.ts

@@ -28,7 +28,9 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
-  booleanAttribute
+  booleanAttribute,
+  computed,
+  input
 } from '@angular/core';
 import { Subject, animationFrameScheduler, asapScheduler, merge, of } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
@@ -39,6 +41,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzTabPositionMode, NzTabScrollEvent, NzTabScrollListOffsetEvent } from './interfaces';
 import { NzTabAddButtonComponent } from './tab-add-button.component';
+import { NzTabBarExtraContentDirective } from './tab-bar-extra-content.directive';
 import { NzTabNavItemDirective } from './tab-nav-item.directive';
 import { NzTabNavOperationComponent } from './tab-nav-operation.component';
 import { NzTabScrollListDirective } from './tab-scroll-list.directive';
@@ -54,6 +57,11 @@ const CSS_TRANSFORM_TIME = 150;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   template: `
+    @if (startExtraContent()) {
+      <div class="ant-tabs-extra-content">
+        <ng-template [ngTemplateOutlet]="startExtraContent()!.templateRef"></ng-template>
+      </div>
+    }
     <div
       class="ant-tabs-nav-wrap"
       [class.ant-tabs-nav-wrap-ping-left]="pingLeft"
@@ -90,7 +98,11 @@ const CSS_TRANSFORM_TIME = 150;
       [addable]="addable"
       [items]="hiddenItems"
     ></nz-tab-nav-operation>
-    @if (extraTemplate) {
+    @if (endExtraContent()) {
+      <div class="ant-tabs-extra-content">
+        <ng-template [ngTemplateOutlet]="endExtraContent()!.templateRef"></ng-template>
+      </div>
+    } @else if (extraTemplate) {
       <div class="ant-tabs-extra-content">
         <ng-template [ngTemplateOutlet]="extraTemplate"></ng-template>
       </div>
@@ -121,6 +133,11 @@ export class NzTabNavBarComponent implements AfterViewInit, AfterContentChecked,
   @Input() inkBarAnimated = true;
   @Input() extraTemplate?: TemplateRef<void>;
 
+  readonly extraContents = input.required<readonly NzTabBarExtraContentDirective[]>();
+
+  readonly startExtraContent = computed(() => this.extraContents().find(item => item.position() === 'start'));
+  readonly endExtraContent = computed(() => this.extraContents().find(item => item.position() === 'end'));
+
   @Input()
   get selectedIndex(): number {
     return this._selectedIndex;

components/tabs/tabs.module.ts

@@ -6,6 +6,7 @@
 import { NgModule } from '@angular/core';
 
 import { NzTabAddButtonComponent } from './tab-add-button.component';
+import { NzTabBarExtraContentDirective } from './tab-bar-extra-content.directive';
 import { NzTabBodyComponent } from './tab-body.component';
 import { NzTabCloseButtonComponent } from './tab-close-button.component';
 import { NzTabLinkDirective, NzTabLinkTemplateDirective } from './tab-link.directive';
@@ -31,7 +32,8 @@ const DIRECTIVES = [
   NzTabDirective,
   NzTabBodyComponent,
   NzTabLinkDirective,
-  NzTabLinkTemplateDirective
+  NzTabLinkTemplateDirective,
+  NzTabBarExtraContentDirective
 ];
 
 @NgModule({

components/tabs/tabset.component.spec.ts

@@ -939,6 +939,18 @@ describe('NzTabSet', () => {
       flush();
     }));
   });
+
+  describe('extra content', () => {
+    it('should be possible to render additional content on both sides', () => {
+      const fixture = TestBed.createComponent(SimpleTabsWithExtraContentComponent);
+      fixture.detectChanges();
+      const tabsNav: HTMLDivElement = fixture.nativeElement.querySelector('.ant-tabs-nav');
+      expect(tabsNav.firstElementChild?.classList).toContain('ant-tabs-extra-content');
+      expect(tabsNav.firstElementChild?.textContent?.trim()).toEqual('Start Extra Action');
+      expect(tabsNav.lastElementChild?.classList).toContain('ant-tabs-extra-content');
+      expect(tabsNav.lastElementChild?.textContent?.trim()).toEqual('End Extra Action');
+    });
+  });
 });
 
 @Component({
@@ -1259,3 +1271,20 @@ function getTranslate(transformValue: string): { x: number; y: number } {
     y: match && match[2] ? Number.parseFloat(match[2]) : 0
   };
 }
+
+@Component({
+  imports: [NzTabsModule],
+  template: `
+    <nz-tabset [(nzSelectedIndex)]="selectedIndex">
+      <button *nzTabBarExtraContent="'start'">Start Extra Action</button>
+      <button *nzTabBarExtraContent="'end'">End Extra Action</button>
+
+      <nz-tab nzTitle="Tab 0">Content of Tab Pane 0</nz-tab>
+      <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
+      <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
+    </nz-tabset>
+  `
+})
+class SimpleTabsWithExtraContentComponent {
+  selectedIndex = 0;
+}

components/tabs/tabset.component.ts

@@ -16,6 +16,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  contentChildren,
   ContentChildren,
   EventEmitter,
   forwardRef,
@@ -49,6 +50,7 @@ import {
   NzTabScrollEvent,
   NzTabType
 } from './interfaces';
+import { NzTabBarExtraContentDirective } from './tab-bar-extra-content.directive';
 import { NzTabBodyComponent } from './tab-body.component';
 import { NzTabCloseButtonComponent } from './tab-close-button.component';
 import { NzTabLinkDirective } from './tab-link.directive';
@@ -83,6 +85,7 @@ let nextId = 0;
         [hideBar]="nzHideAll"
         [position]="position"
         [extraTemplate]="nzTabBarExtraContent"
+        [extraContents]="extraContents()"
         (tabScroll)="nzTabListScroll.emit($event)"
         (selectFocusedIndex)="setSelectedIndex($event)"
         (addClicked)="onAdd()"
@@ -252,13 +255,15 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
   // We filter out only the tabs that belong to this tab set in `tabs`.
   @ContentChildren(NzTabComponent, { descendants: true })
   allTabs: QueryList<NzTabComponent> = new QueryList<NzTabComponent>();
+
   @ContentChildren(NzTabLinkDirective, { descendants: true })
   tabLinks: QueryList<NzTabLinkDirective> = new QueryList<NzTabLinkDirective>();
   @ViewChild(NzTabNavBarComponent, { static: false }) tabNavBarRef!: NzTabNavBarComponent;
-
   // All the direct tabs for this tab set
   tabs: QueryList<NzTabComponent> = new QueryList<NzTabComponent>();
 
+  readonly extraContents = contentChildren(NzTabBarExtraContentDirective);
+
   dir: Direction = 'ltr';
   private readonly tabSetId!: number;
   private destroy$ = new Subject<void>();