ng-zorro-antd icon indicating copy to clipboard operation
ng-zorro-antd copied to clipboard

feat(module:segmented): redesign the segmented component

Open HyperLife1119 opened this issue 5 months ago • 1 comments

PR Checklist

Please check if your PR fulfills the following requirements:

  • [x] The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
  • [x] Tests for the changes have been added (for bug fixes / features)
  • [x] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • [ ] Bugfix
  • [x] 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?

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

Other information

HyperLife1119 avatar Sep 15 '24 15:09 HyperLife1119