ng-zorro-antd
ng-zorro-antd copied to clipboard
feat(module:segmented): redesign the segmented component
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
- ngModel 的值是 index
- 自定义渲染用法不符合人体工学
<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?
- 将 ngModel 的值改为
option.value
- 新增
[nz-segmented-item]
组件,提供直接的自定义渲染功能
<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
- ngModel 的值从 index 修正为
option.value
- 不再需要
nzLabelTemplate
input,将其移除 - nzValueChange 的类型从
EventEmitter<number>
修改为EventEmitter<number | string>