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‎

Lines changed: 3 additions & 8 deletions
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‎

Lines changed: 3 additions & 8 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 3 additions & 6 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 50 additions & 28 deletions
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‎

Lines changed: 8 additions & 1 deletion
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‎

Lines changed: 8 additions & 1 deletion
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‎

Lines changed: 8 additions & 3 deletions
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'];

0 commit comments

Comments
 (0)