Skip to content

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

Merged
Laffery merged 1 commit into
NG-ZORRO:masterfrom
HyperLife1119:feat/tabs-extra-content
Apr 30, 2025
Merged

feat(module:tabs): support for start and end extra content#9097
Laffery merged 1 commit into
NG-ZORRO:masterfrom
HyperLife1119:feat/tabs-extra-content

Conversation

@HyperLife1119

@HyperLife1119 HyperLife1119 commented Apr 19, 2025

Copy link
Copy Markdown
Collaborator

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Application (the showcase website) / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

Only extra content at the end is supported.

What is the new behavior?

QQ_1745035530965

<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>

Supports extra content at the start and end.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@HyperLife1119 HyperLife1119 requested a review from hsuanxyz as a code owner April 19, 2025 04:03
@zorro-bot

zorro-bot Bot commented Apr 19, 2025

Copy link
Copy Markdown

This preview will be available after the AzureCI is passed.

@codecov

codecov Bot commented Apr 19, 2025

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.01%. Comparing base (1c1c3e4) to head (e4a7396).
Report is 7 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #9097   +/-   ##
=======================================
  Coverage   92.01%   92.01%           
=======================================
  Files         564      565    +1     
  Lines       20026    20034    +8     
  Branches     3107     3107           
=======================================
+ Hits        18426    18435    +9     
  Misses       1261     1261           
+ Partials      339      338    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread components/tabs/tab-bar-extra-content.directive.ts
import { Directive, inject, input, TemplateRef } from '@angular/core';

@Directive({
selector: '[nzTabBarExtraContent]:not(nz-tabset)'

@HyperLife1119 HyperLife1119 Apr 19, 2025

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nz-tabset 上也有一个属性为 nzTabBarExtraContent,因此需要排除一下。

我在想是否应该弃用 nz-tabset 上的 nzTabBarExtraContent 用法,引导用户采用现在这种更通用的用法?

@HyperLife1119 HyperLife1119 requested review from Laffery and Copilot and removed request for hsuanxyz April 19, 2025 04:14

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces support for rendering extra content at both the start and end of the tabset. Key changes include:

  • Adding a new binding ([extraContents]) and helper (contentChildren) in the tabset component.
  • Updating the tab navigation bar to render start and end extra content using Angular 17’s computed and input signals.
  • Updating tests, docs, and demos to reflect the enhanced functionality.

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.

Show a summary per file
File Description
components/tabs/tabset.component.ts Added support for extra content binding and integrated extraContents.
components/tabs/tabset.component.spec.ts Added tests to verify rendering of start and end extra content.
components/tabs/tabs.module.ts Updated module exports to include the new extra content directive.
components/tabs/tab-nav-bar.component.ts Implemented computed signals to conditionally render extra content.
components/tabs/tab-bar-extra-content.directive.ts Created new directive for specifying extra content position.
Documentation and demo files Updated to demonstrate the new functionality.

Comment thread components/tabs/public-api.ts
Comment thread components/tabs/tabset.component.ts Outdated
Comment thread components/tabs/tab-nav-bar.component.ts
@HyperLife1119 HyperLife1119 force-pushed the feat/tabs-extra-content branch from 1111039 to e4a7396 Compare April 22, 2025 02:13
@HyperLife1119 HyperLife1119 requested a review from Laffery April 22, 2025 02:13

@Laffery Laffery left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Laffery Laffery merged commit 2500821 into NG-ZORRO:master Apr 30, 2025
@Laffery Laffery added this to the v19.3 milestone Apr 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants