Skip to content

Commit 4dc866c

Browse files
HyperLife1119HyperLife1119
authored
feat(module:segmented): redesign the segmented component (#8753)
1 parent c79c203 commit 4dc866c

21 files changed

+382
-241
lines changed

‎components/flex/demo/align.ts

+3-8
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,7 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
2020
<nz-segmented [nzOptions]="alignSegment" [(ngModel)]="selectedLAlignment"></nz-segmented>
2121
</div>
2222
23-
<div
24-
class="btn-wrappers"
25-
nz-flex
26-
[nzJustify]="justifySegment[selectedJustification]"
27-
[nzAlign]="alignSegment[selectedLAlignment]"
28-
>
23+
<div class="btn-wrappers" nz-flex [nzJustify]="selectedJustification" [nzAlign]="selectedLAlignment">
2924
<button nz-button nzType="primary">Primary</button>
3025
<button nz-button nzType="primary">Primary</button>
3126
<button nz-button nzType="primary">Primary</button>
@@ -59,6 +54,6 @@ export class NzDemoFlexAlignComponent {
5954
'space-evenly'
6055
];
6156
public alignSegment: NzAlign[] = ['flex-start', 'center', 'flex-end'];
62-
public selectedJustification = 0;
63-
public selectedLAlignment = 0;
57+
public selectedJustification: NzJustify = 'flex-start';
58+
public selectedLAlignment: NzAlign = 'flex-start';
6459
}

‎components/flex/demo/gap.ts

+3-8
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,10 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
1515
<span>Select gap:</span>
1616
<nz-segmented [nzOptions]="gapSegment" [(ngModel)]="selectedGap"></nz-segmented>
1717
</div>
18-
@if (gapSegment[selectedGap] === 'custom') {
18+
@if (selectedGap === 'custom') {
1919
<nz-slider [nzMin]="0" [nzMax]="100" [(ngModel)]="customGapValue" />
2020
}
21-
<div
22-
nz-flex
23-
[nzGap]="
24-
selectedGap === 0 ? 'small' : selectedGap === 1 ? 'middle' : selectedGap === 2 ? 'large' : customGapValue
25-
"
26-
>
21+
<div nz-flex [nzGap]="selectedGap === 'custom' ? customGapValue : selectedGap">
2722
<button nz-button nzType="primary">Primary</button>
2823
<button nz-button nzType="dashed">Dashed</button>
2924
<button nz-button nzType="default">Default</button>
@@ -44,6 +39,6 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
4439
})
4540
export class NzDemoFlexGapComponent {
4641
public gapSegment: string[] = ['small', 'middle', 'large', 'custom'];
47-
public selectedGap = 0;
42+
public selectedGap = 'small';
4843
public customGapValue = 0;
4944
}

‎components/flex/demo/wrap.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
1414
<span>Select wrap:</span>
1515
<nz-segmented [nzOptions]="wrapSegment" [(ngModel)]="selectedWrap"></nz-segmented>
1616
</div>
17-
<div class="btn-wrapper" nz-flex [nzGap]="'middle'" [nzWrap]="wrapSegment[selectedWrap]">
17+
<div class="btn-wrapper" nz-flex [nzGap]="'middle'" [nzWrap]="selectedWrap">
1818
@for (_ of array; track _) {
1919
<button style="width: 100px" nz-button nzType="primary">Button {{ _ }}</button>
2020
}
@@ -39,6 +39,6 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
3939
})
4040
export class NzDemoFlexWrapComponent {
4141
wrapSegment: NzWrap[] = ['wrap', 'wrap-reverse', 'nowrap'];
42-
selectedWrap = 0;
42+
selectedWrap: NzWrap = 'wrap';
4343
array = Array.from({ length: 20 }, (_, index) => index + 1);
4444
}

‎components/qr-code/demo/error-level.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
23

34
import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
45
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
56

67
@Component({
78
selector: 'nz-demo-qr-code-error-level',
89
standalone: true,
9-
imports: [NzQRCodeModule, NzSegmentedModule],
10+
imports: [NzQRCodeModule, NzSegmentedModule, FormsModule],
1011
template: `
1112
<nz-qrcode nzValue="https://github.com/NG-ZORRO/ng-zorro-antd/issues" [nzLevel]="errorLevel"></nz-qrcode>
12-
<nz-segmented [nzOptions]="options" (nzValueChange)="handleIndexChange($event)"></nz-segmented>
13+
<nz-segmented [nzOptions]="options" [(ngModel)]="errorLevel"></nz-segmented>
1314
`,
1415
styles: [
1516
`
@@ -28,8 +29,4 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
2829
export class NzDemoQrCodeErrorLevelComponent {
2930
options: Array<'L' | 'M' | 'Q' | 'H'> = ['L', 'M', 'Q', 'H'];
3031
errorLevel: 'L' | 'M' | 'Q' | 'H' = 'L';
31-
32-
handleIndexChange(e: number): void {
33-
this.errorLevel = this.options[e];
34-
}
3532
}

‎components/segmented/demo/basic.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
66
selector: 'nz-demo-segmented-basic',
77
standalone: true,
88
imports: [NzSegmentedModule],
9-
template: `<nz-segmented [nzOptions]="options" (nzValueChange)="handleIndexChange($event)"></nz-segmented>`
9+
template: `<nz-segmented [nzOptions]="options" (nzValueChange)="handleValueChange($event)"></nz-segmented>`
1010
})
1111
export class NzDemoSegmentedBasicComponent {
1212
options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
1313

14-
handleIndexChange(e: number): void {
14+
handleValueChange(e: string | number): void {
1515
console.log(e);
1616
}
1717
}

‎components/segmented/demo/custom.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ title:
77

88
## zh-CN
99

10-
使用 nzLabelTemplate 自定义渲染每一个 Segmented Item。
10+
自定义渲染每一个 Segmented Item。
1111

1212
## en-US
1313

14-
Custom each Segmented Item by nzLabelTemplate.
14+
Custom render each Segmented Item.

‎components/segmented/demo/custom.ts

+50-28
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,63 @@
1-
import { Component, TemplateRef, ViewChild } from '@angular/core';
1+
import { Component } from '@angular/core';
22

33
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
4-
import { NzSegmentedModule, NzSegmentedOption } from 'ng-zorro-antd/segmented';
4+
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
55

66
@Component({
77
selector: 'nz-demo-segmented-custom',
88
standalone: true,
99
imports: [NzAvatarModule, NzSegmentedModule],
1010
template: `
11-
<nz-segmented [nzLabelTemplate]="templateRef" [nzOptions]="options"></nz-segmented>
12-
<ng-template #temp let-index="index">
13-
@switch (index) {
14-
@case (0) {
15-
<nz-avatar nzSrc="https://joeschmoe.io/api/v1/random"></nz-avatar>
11+
<nz-segmented>
12+
<label nz-segmented-item nzValue="user1">
13+
<div [style.padding.px]="4">
14+
<nz-avatar nzSrc="https://joeschmoe.io/api/v1/random" />
1615
<div>User 1</div>
17-
}
18-
@case (1) {
19-
<nz-avatar nzText="K"></nz-avatar>
16+
</div>
17+
</label>
18+
<label nz-segmented-item nzValue="user2">
19+
<div [style.padding.px]="4">
20+
<nz-avatar nzText="K" [style.background]="'#f56a00'" />
2021
<div>User 2</div>
21-
}
22-
@case (2) {
23-
<nz-avatar nzIcon="user"></nz-avatar>
22+
</div>
23+
</label>
24+
<label nz-segmented-item nzValue="user3">
25+
<div [style.padding.px]="4">
26+
<nz-avatar nzIcon="user" [style.background]="'#87d068'" />
2427
<div>User 3</div>
25-
}
26-
}
27-
</ng-template>
28+
</div>
29+
</label>
30+
</nz-segmented>
31+
32+
<br />
33+
<br />
34+
35+
<nz-segmented>
36+
<label nz-segmented-item nzValue="spring">
37+
<div [style.padding.px]="4">
38+
<div>Spring</div>
39+
<div>Jan-Mar</div>
40+
</div>
41+
</label>
42+
<label nz-segmented-item nzValue="summer">
43+
<div [style.padding.px]="4">
44+
<div>Summer</div>
45+
<div>Apr-Jun</div>
46+
</div>
47+
</label>
48+
<label nz-segmented-item nzValue="autumn">
49+
<div [style.padding.px]="4">
50+
<div>Autumn</div>
51+
<div>Jul-Sept</div>
52+
</div>
53+
</label>
54+
<label nz-segmented-item nzValue="winter">
55+
<div [style.padding.px]="4">
56+
<div>Winter</div>
57+
<div>Oct-Dec</div>
58+
</div>
59+
</label>
60+
</nz-segmented>
2861
`
2962
})
30-
export class NzDemoSegmentedCustomComponent {
31-
@ViewChild('temp', { static: true, read: TemplateRef }) templateRef!: TemplateRef<{
32-
$implicit: NzSegmentedOption;
33-
index: number;
34-
}>;
35-
36-
options = [
37-
{ label: 'user1', value: 'user1', useTemplate: true },
38-
{ label: 'user2', value: 'user2', useTemplate: true },
39-
{ label: 'user3', value: 'user3', useTemplate: true }
40-
];
41-
}
63+
export class NzDemoSegmentedCustomComponent {}

‎components/segmented/demo/disabled.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
1010
<nz-segmented [nzOptions]="['Map', 'Transit', 'Satellite']" nzDisabled></nz-segmented>
1111
<br />
1212
<nz-segmented [nzOptions]="options"></nz-segmented>
13-
`
13+
`,
14+
styles: [
15+
`
16+
.ant-segmented {
17+
margin-bottom: 10px;
18+
}
19+
`
20+
]
1421
})
1522
export class NzDemoSegmentedDisabledComponent {
1623
options = [

‎components/segmented/demo/dynamic.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@ const defaultOptions = ['Daily', 'Weekly', 'Monthly'];
1313
<nz-segmented [nzOptions]="options"></nz-segmented>
1414
<br />
1515
<button nz-button nzType="primary" [disabled]="moreLoaded" (click)="handleLoadMore()"> Load more options </button>
16-
`
16+
`,
17+
styles: [
18+
`
19+
.ant-segmented {
20+
margin-bottom: 10px;
21+
}
22+
`
23+
]
1724
})
1825
export class NzDemoSegmentedDynamicComponent {
1926
options = [...defaultOptions];

‎components/segmented/demo/size.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
99
template: `
1010
<nz-segmented [nzOptions]="options" nzSize="small"></nz-segmented>
1111
<br />
12-
<br />
1312
<nz-segmented [nzOptions]="options"></nz-segmented>
1413
<br />
15-
<br />
1614
<nz-segmented [nzOptions]="options" nzSize="large"></nz-segmented>
17-
`
15+
`,
16+
styles: [
17+
`
18+
.ant-segmented {
19+
margin-bottom: 10px;
20+
}
21+
`
22+
]
1823
})
1924
export class NzDemoSegmentedSizeComponent {
2025
options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];

‎components/segmented/demo/value.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title:
77

88
## zh-CN
99

10-
通过 ngModel 指定选中的 index
10+
通过 ngModel 指定选中的 value
1111

1212
## en-US
1313

‎components/segmented/demo/value.ts

+13-18
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,23 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
88
standalone: true,
99
imports: [FormsModule, NzSegmentedModule],
1010
template: `
11-
<nz-segmented
12-
[nzOptions]="options"
13-
[(ngModel)]="selectedIndex"
14-
(ngModelChange)="handleModelChange($event)"
15-
></nz-segmented>
11+
<nz-segmented [nzOptions]="options" [(ngModel)]="selectedValue" (ngModelChange)="handleModelChange($event)" />
1612
<br />
17-
<br />
18-
<nz-segmented
19-
[nzOptions]="options"
20-
[(ngModel)]="selectedIndex"
21-
(ngModelChange)="handleModelChange($event)"
22-
></nz-segmented>
23-
<br />
24-
<br />
25-
Selected index: {{ selectedIndex }}
26-
`
13+
Selected value: {{ selectedValue }}
14+
`,
15+
styles: [
16+
`
17+
.ant-segmented {
18+
margin-bottom: 10px;
19+
}
20+
`
21+
]
2722
})
2823
export class NzDemoSegmentedValueComponent {
29-
selectedIndex = 1;
24+
selectedValue = 'Weekly';
3025
options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
3126

32-
handleModelChange(index: number): void {
33-
console.log(index);
27+
handleModelChange(value: string): void {
28+
console.log(value);
3429
}
3530
}

‎components/segmented/doc/index.en-US.md

+19-11
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,22 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
1616

1717
## API
1818

19-
### Segmented:standalone
20-
21-
| Property | Description | Type | Default | Global Config |
22-
| ----------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------- | ------------- |
23-
| `[nzBlock]` | Option to fit width to its parent\'s width | `boolean` | false | |
24-
| `[nzDisabled]` | Disable all segments | `boolean` | false | |
25-
| `[nzOptions]` | Set children optional | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; useTemplate?: boolean }>` | - | |
26-
| `[nzSize]` | The size of the Segmented | `large \| default \| small` | - | ✅ |
27-
| `[ngModel]` | Index of the currently selected option | `number` | - | |
28-
| `(nzValueChange)` | Emits when index of the currently selected option changes | `EventEmitter<number>` | - | |
29-
| `(ngModelChange)` | Emits when index of the currently selected option changes | `EventEmitter<number>` | - | |
19+
### nz-segmented:standalone
20+
21+
| Property | Description | Type | Default | Global Config |
22+
| ----------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------- | ------------- |
23+
| `[nzBlock]` | Option to fit width to its parent\'s width | `boolean` | false | |
24+
| `[nzDisabled]` | Disable all segments | `boolean` | false | |
25+
| `[nzOptions]` | Set children optional | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean }>` | - | |
26+
| `[nzSize]` | The size of the Segmented | `large \| default \| small` | - | ✅ |
27+
| `[ngModel]` | Value of the currently selected option | `string \| number` | - | |
28+
| `(nzValueChange)` | Emits when value of the currently selected option changes | `EventEmitter<string \| number>` | - | |
29+
| `(ngModelChange)` | Emits when value of the currently selected option changes | `EventEmitter<string \| number>` | - | |
30+
31+
### label[nz-segmented-item]:standalone
32+
33+
| Property | Description | Type | Default | Global Config |
34+
| -------------- | -------------------------- | ------------------ | ------- | ------------- |
35+
| `[nzIcon]` | Icon in segmented item | `string` | - | |
36+
| `[nzValue]` | Value of segmented item | `string \| number` | - | |
37+
| `[nzDisabled]` | Disable the segmented item | `boolean` | false | |

‎components/segmented/doc/index.zh-CN.md

+19-11
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,22 @@ import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
1717

1818
## API
1919

20-
### Segmented:standalone
21-
22-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
23-
| ----------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- |
24-
| `[nzBlock]` | 将宽度调整为父元素宽度的选项 | `boolean` | false | |
25-
| `[nzDisabled]` | 是否禁用 | `boolean` | false | |
26-
| `[nzOptions]` | 数据化配置选项内容 | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; useTemplate?: boolean }>` | - | |
27-
| `[nzSize]` | 控件尺寸 | `large \| default \| small` | - | ✅ |
28-
| `[ngModel]` | 当前选中项目的 index | `number` | - | |
29-
| `(nzValueChange)` | 当前选中项目变化时触发回调 | `EventEmitter<number>` | - | |
30-
| `(ngModelChange)` | 当前选中项目变化时触发回调 | `EventEmitter<number>` | - | |
20+
### nz-segmented:standalone
21+
22+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
23+
| ----------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------- | ------ | -------- |
24+
| `[nzBlock]` | 将宽度调整为父元素宽度的选项 | `boolean` | false | |
25+
| `[nzDisabled]` | 是否禁用 | `boolean` | false | |
26+
| `[nzOptions]` | 数据化配置选项内容 | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; }>` | - | |
27+
| `[nzSize]` | 控件尺寸 | `large \| default \| small` | - | ✅ |
28+
| `[ngModel]` | 当前选中项目的 value | `string \| number` | - | |
29+
| `(nzValueChange)` | 当前选中项目变化时触发回调 | `EventEmitter<string \| number>` | - | |
30+
| `(ngModelChange)` | 当前选中项目变化时触发回调 | `EventEmitter<string \| number>` | - | |
31+
32+
### label[nz-segmented-item]:standalone
33+
34+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
35+
| -------------- | -------- | ------------------ | ------ | -------- |
36+
| `[nzIcon]` | 图标 | `string` | - | |
37+
| `[nzValue]` | 值 | `string \| number` | - | |
38+
| `[nzDisabled]` | 是否禁用 | `boolean` | false | |

‎components/segmented/public-api.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
export { NzSegmentedModule } from './segmented.module';
6+
export { NzSegmentedItemComponent } from './segmented-item.component';
77
export { NzSegmentedComponent } from './segmented.component';
8+
export { NzSegmentedModule } from './segmented.module';
89
export * from './types';

0 commit comments

Comments
 (0)