Skip to content

Commit ffce6c3

Browse files
Nicoss54Nicoss54
authored
feat(module:segmented): support nzShape(#9368)
1 parent 235b493 commit ffce6c3

File tree

7 files changed

+103
-22
lines changed

7 files changed

+103
-22
lines changed

‎components/segmented/demo/shape.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 14
3+
title:
4+
zh-CN: 胶囊形状
5+
en-US: Round Shape
6+
---
7+
8+
## zh-CN
9+
10+
胶囊型的 Segmented。
11+
12+
## en-US
13+
14+
Round shape of Segmented.

‎components/segmented/demo/shape.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Component, model } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
5+
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
6+
7+
@Component({
8+
selector: 'nz-demo-segmented-shape',
9+
imports: [NzSegmentedModule, FormsModule],
10+
template: `
11+
<nz-segmented [nzOptions]="optionsSize" [(ngModel)]="currentSize" />
12+
<nz-segmented [nzOptions]="options" nzShape="round" [nzSize]="currentSize()" />
13+
`,
14+
styles: `
15+
nz-segmented:first-child {
16+
display: block;
17+
width: fit-content;
18+
margin-bottom: 16px;
19+
}
20+
`
21+
})
22+
export class NzDemoSegmentedShapeComponent {
23+
currentSize = model<NzSizeLDSType>('default');
24+
25+
optionsSize = [
26+
{ value: 'small', label: 'Small' },
27+
{ value: 'default', label: 'Medium' },
28+
{ value: 'large', label: 'Large' }
29+
];
30+
options = [
31+
{ value: 'List', icon: 'bars' },
32+
{ value: 'Kanban', icon: 'appstore' }
33+
];
34+
}

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,18 @@ description: Display multiple options and allow users to select a single option.
1515

1616
### nz-segmented
1717

18-
| Property | Description | Type | Default | Global Config |
19-
| ----------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------- | ------------- |
20-
| `[nzBlock]` | Option to fit width to its parent\'s width | `boolean` | `false` | |
21-
| `[nzDisabled]` | Disable all segments | `boolean` | `false` | |
22-
| `[nzOptions]` | Set children optional | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean }>` | - | |
23-
| `[nzSize]` | The size of the Segmented | `large \| default \| small` | - | ✅ |
24-
| `[nzVertical]` | Orientation | `boolean` | `false` | |
25-
| `[nzName]` | The name property of all `input[type="radio"]` children | `string` | - | |
26-
| `[ngModel]` | Value of the currently selected option | `string \| number` | - | |
27-
| `(nzValueChange)` | Emits when value of the currently selected option changes | `EventEmitter<string \| number>` | - | |
28-
| `(ngModelChange)` | Emits when value of the currently selected option changes | `EventEmitter<string \| number>` | - | |
18+
| Property | Description | Type | Default | Global Config |
19+
| ----------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------- | ------------- |
20+
| `[nzBlock]` | Option to fit width to its parent\'s width | `boolean` | `false` | |
21+
| `[nzDisabled]` | Disable all segments | `boolean` | `false` | |
22+
| `[nzOptions]` | Set children optional | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean }>` | - | |
23+
| `[nzSize]` | The size of the Segmented | `large \| default \| small` | - | ✅ |
24+
| `[nzShape]` | Shape of Segmented | `default \| round` | `default` | - |
25+
| `[nzVertical]` | Orientation | `boolean` | `false` | - |
26+
| `[nzName]` | The name property of all `input[type="radio"]` children | `string` | - | |
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>` | - | |
2930

3031
### label[nz-segmented-item]
3132

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,18 @@ description: 用于展示多个选项并允许用户选择其中单个选项。
1616

1717
### nz-segmented
1818

19-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
20-
| ----------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------- | -------- |
21-
| `[nzBlock]` | 将宽度调整为父元素宽度的选项 | `boolean` | `false` | |
22-
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | |
23-
| `[nzOptions]` | 数据化配置选项内容 | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; }>` | - | |
24-
| `[nzSize]` | 控件尺寸 | `large \| default \| small` | - | ✅ |
25-
| `[nzVertical]` | 排列方向 | `boolean` | `false` | |
26-
| `[nzName]` | 所有 `input[type="radio"]` 的 `name` 属性 | `string` | - | |
27-
| `[ngModel]` | 当前选中项目的 value | `string \| number` | - | |
28-
| `(nzValueChange)` | 当前选中项目变化时触发回调 | `EventEmitter<string \| number>` | - | |
29-
| `(ngModelChange)` | 当前选中项目变化时触发回调 | `EventEmitter<string \| number>` | - | |
19+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
20+
| ----------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------- | -------- |
21+
| `[nzBlock]` | 将宽度调整为父元素宽度的选项 | `boolean` | `false` | |
22+
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | |
23+
| `[nzOptions]` | 数据化配置选项内容 | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; }>` | - | |
24+
| `[nzSize]` | 控件尺寸 | `large \| default \| small` | - | ✅ |
25+
| `[nzShape]` | 形状 | `default \| round` | `default` | - |
26+
| `[nzVertical]` | 排列方向 | `boolean` | `false` | - |
27+
| `[nzName]` | 所有 `input[type="radio"]` 的 `name` 属性 | `string` | - | |
28+
| `[ngModel]` | 当前选中项目的 value | `string \| number` | - | |
29+
| `(nzValueChange)` | 当前选中项目变化时触发回调 | `EventEmitter<string \| number>` | - | |
30+
| `(ngModelChange)` | 当前选中项目变化时触发回调 | `EventEmitter<string \| number>` | - | |
3031

3132
### label[nz-segmented-item]
3233

‎components/segmented/segmented.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'segmented';
7373
'[class.ant-segmented-sm]': `nzSize === 'small'`,
7474
'[class.ant-segmented-block]': `nzBlock`,
7575
'[class.ant-segmented-vertical]': `nzVertical`,
76+
'[class.ant-segmented-shape-round]': `nzShape === 'round'`,
7677
// a11y
7778
role: 'radiogroup',
7879
'aria-label': 'segmented control',
@@ -101,6 +102,7 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
101102
@Input({ transform: booleanAttribute }) nzDisabled = false;
102103
@Input() nzOptions: NzSegmentedOptions = [];
103104
@Input({ transform: booleanAttribute }) nzVertical: boolean = false;
105+
@Input() nzShape: 'default' | 'round' = 'default';
104106
@Input() @WithConfig() nzSize: NzSizeLDSType = 'default';
105107

106108
// todo: add a method to generate hash id for the segmented instance as default value of `nzName`

‎components/segmented/segmented.spec.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,21 @@ describe('nz-segmented', () => {
6868
expect(segmentedElement.classList).toContain('ant-segmented-vertical');
6969
});
7070

71+
it('should support round shape and trigger animation state on interaction', fakeAsync(() => {
72+
const segmentedElement: HTMLElement = segmentedComponent.nativeElement;
73+
expect(segmentedElement.classList).not.toContain('ant-segmented-shape-round');
74+
component.shape = 'round';
75+
fixture.detectChanges();
76+
expect(segmentedElement.classList).toContain('ant-segmented-shape-round');
77+
const theSecondElement = getSegmentedOptionByIndex(1);
78+
tick(0);
79+
fixture.detectChanges();
80+
dispatchMouseEvent(theSecondElement, 'click');
81+
tick(100);
82+
fixture.detectChanges();
83+
expect(segmentedElement.classList).toContain('ant-segmented-shape-round');
84+
}));
85+
7186
it('should be auto selected the first option when if no value is set', async () => {
7287
const theFirstElement = getSegmentedOptionByIndex(0);
7388
await fixture.whenStable();
@@ -586,6 +601,7 @@ describe('nz-segmented', () => {
586601
[nzDisabled]="disabled"
587602
[nzBlock]="block"
588603
[nzVertical]="vertical"
604+
[nzShape]="shape"
589605
(nzValueChange)="handleValueChange($event)"
590606
/>
591607
`
@@ -596,6 +612,7 @@ export class NzSegmentedTestComponent {
596612
block = false;
597613
disabled = false;
598614
vertical = false;
615+
shape: 'default' | 'round' = 'default';
599616

600617
handleValueChange(_e: string | number): void {
601618
// empty

‎components/segmented/style/index.less

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,18 @@
4242
}
4343
}
4444

45+
&-shape-round {
46+
border-radius: 9999px;
47+
48+
.@{segmented-prefix-cls}-item {
49+
border-radius: 9999px;
50+
}
51+
52+
.@{segmented-prefix-cls}-thumb {
53+
border-radius: 9999px;
54+
}
55+
}
56+
4557
// block styles
4658
&&-block {
4759
display: flex;

0 commit comments

Comments
 (0)