Skip to content

feat(module:segmented): redesign the segmented component#8753

Merged
Laffery merged 1 commit into
NG-ZORRO:masterfrom
HyperLife1119:feat/redesign-segmented
Nov 22, 2024
Merged

feat(module:segmented): redesign the segmented component#8753
Laffery merged 1 commit into
NG-ZORRO:masterfrom
HyperLife1119:feat/redesign-segmented

Conversation

@HyperLife1119
Copy link
Copy Markdown
Collaborator

@HyperLife1119 HyperLife1119 commented Sep 15, 2024

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

  1. ngModel 的值是 index
  2. 自定义渲染用法不符合人体工学
<nz-segmented [nzLabelTemplate]="templateRef" [nzOptions]="options"></nz-segmented>
<ng-template #temp let-index="index">
  @switch (index) {
    @case (0) {
      <nz-avatar nzSrc="https://joeschmoe.io/api/v1/random"></nz-avatar>
      <div>User 1</div>
    }
    @case (1) {
      <nz-avatar nzText="K"></nz-avatar>
      <div>User 2</div>
    }
    @case (2) {
      <nz-avatar nzIcon="user"></nz-avatar>
      <div>User 3</div>
    }
  }
</ng-template>

What is the new behavior?

  1. 将 ngModel 的值改为 option.value
  2. 新增 [nz-segmented-item] 组件,提供直接的自定义渲染功能

QQ_1726415516692

<nz-segmented>
  <label nz-segmented-item nzValue="user1">
    <div [style.padding.px]="4">
      <nz-avatar nzSrc="https://joeschmoe.io/api/v1/random" />
      <div>User 1</div>
    </div>
  </label>
  <label nz-segmented-item nzValue="user2">
    <div [style.padding.px]="4">
      <nz-avatar nzText="K" [style.background]="'#f56a00'" />
      <div>User 2</div>
    </div>
  </label>
  <label nz-segmented-item nzValue="user3">
    <div [style.padding.px]="4">
      <nz-avatar nzIcon="user" [style.background]="'#87d068'" />
      <div>User 3</div>
    </div>
  </label>
</nz-segmented>

Does this PR introduce a breaking change?

  • Yes
  • No
  1. ngModel 的值从 index 修正为 option.value
  2. 不再需要 nzLabelTemplate input,将其移除
  3. nzValueChange 的类型从 EventEmitter<number> 修改为 EventEmitter<number | string>

Other information

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💔 Breaking Change This PR or the solution to this issue would introduce breaking changes Component: Segmented PR: reviewed-approved PR: target-major

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants