feat(module:segmented): support nzVertical (#9359)

Nicoss54 · web-flow · commit 52322cd50c1d · 2025-08-28T23:13:42.000+08:00
diff --git a/components/core/animation/thumb.ts b/components/core/animation/thumb.ts
@@ -8,11 +8,13 @@ import { animate, AnimationTriggerMetadata, state, style, transition, trigger }
 import { AnimationCurves } from './animation-consts';
 
 /**
- * a move and resize transition in the horizontal direction
+ * a move and resize transition in the horizontal or vertical direction
  */
 export interface ThumbAnimationProps {
   transform: number;
   width: number;
+  height?: number;
+  vertical?: boolean;
 }
 
 export const thumbMotion: AnimationTriggerMetadata = trigger('thumbMotion', [
@@ -24,5 +26,22 @@ export const thumbMotion: AnimationTriggerMetadata = trigger('thumbMotion', [
     params: { transform: 100, width: 0 }
   }),
 
-  transition('from => to', animate(`300ms ${AnimationCurves.EASE_IN_OUT}`))
+  state(
+    'fromVertical',
+    style({ transform: 'translateY({{ transform }}px)', width: '{{ width }}px', height: '{{ height }}px' }),
+    {
+      params: { transform: 0, width: 0, height: 0 }
+    }
+  ),
+
+  state(
+    'toVertical',
+    style({ transform: 'translateY({{ transform }}px)', width: '{{ width }}px', height: '{{ height }}px' }),
+    {
+      params: { transform: 100, width: 0, height: 0 }
+    }
+  ),
+
+  transition('from => to', animate(`300ms ${AnimationCurves.EASE_IN_OUT}`)),
+  transition('fromVertical => toVertical', animate(`300ms ${AnimationCurves.EASE_IN_OUT}`))
 ]);
diff --git a/components/segmented/demo/vertical.md b/components/segmented/demo/vertical.md
@@ -0,0 +1,14 @@
+---
+order: 13
+title:
+  zh-CN: 垂直方向
+  en-US: Vertical direction
+---
+
+## zh-CN
+
+垂直方向。
+
+## en-US
+
+Make it vertical.
diff --git a/components/segmented/demo/vertical.ts b/components/segmented/demo/vertical.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
+
+@Component({
+  selector: 'nz-demo-segmented-vertical',
+  imports: [NzSegmentedModule],
+  template: ` <nz-segmented [nzOptions]="options" nzVertical />`
+})
+export class NzDemoSegmentedVerticalComponent {
+  options = [
+    { value: 'List', icon: 'bars' },
+    { value: 'Kanban', icon: 'appstore' }
+  ];
+}
diff --git a/components/segmented/doc/index.en-US.md b/components/segmented/doc/index.en-US.md
@@ -21,6 +21,7 @@ description: Display multiple options and allow users to select a single option.
 | `[nzDisabled]`    | Disable all segments                                      | `boolean`                                                                                                     | `false` |               |
 | `[nzOptions]`     | Set children optional                                     | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean }>` | -       |               |
 | `[nzSize]`        | The size of the Segmented                                 | `large \| default \| small`                                                                                   | -       | ✅            |
+| `[nzVertical]`    | Orientation                                               | `boolean`                                                                                                     | `false` | -             |
 | `[ngModel]`       | Value of the currently selected option                    | `string \| number`                                                                                            | -       |               |
 | `(nzValueChange)` | Emits when value of the currently selected option changes | `EventEmitter<string \| number>`                                                                              | -       |               |
 | `(ngModelChange)` | Emits when value of the currently selected option changes | `EventEmitter<string \| number>`                                                                              | -       |               |
diff --git a/components/segmented/doc/index.zh-CN.md b/components/segmented/doc/index.zh-CN.md
@@ -22,6 +22,7 @@ description: 用于展示多个选项并允许用户选择其中单个选项。
 | `[nzDisabled]`    | 是否禁用                     | `boolean`                                                                                                      | `false` |          |
 | `[nzOptions]`     | 数据化配置选项内容           | `string[] \| number[] \| Array<{ label: string; value: string \| number; icon: string; disabled?: boolean; }>` | -       |          |
 | `[nzSize]`        | 控件尺寸                     | `large \| default \| small`                                                                                    | -       | ✅       |
+| `[nzVertical]`    | 排列方向                     | `boolean`                                                                                                      | `false` | -        |
 | `[ngModel]`       | 当前选中项目的 value         | `string \| number`                                                                                             | -       |          |
 | `(nzValueChange)` | 当前选中项目变化时触发回调   | `EventEmitter<string \| number>`                                                                               | -       |          |
 | `(ngModelChange)` | 当前选中项目变化时触发回调   | `EventEmitter<string \| number>`                                                                               | -       |          |
diff --git a/components/segmented/segmented-item.component.ts b/components/segmented/segmented-item.component.ts
@@ -77,7 +77,7 @@ export class NzSegmentedItemComponent implements OnInit {
         }),
         switchMap(value =>
           this.service.animationDone$.pipe(
-            filter(event => event.toState === 'to'),
+            filter(event => event.toState === 'to' || event.toState === 'toVertical'),
             take(1),
             map(() => value)
           )
diff --git a/components/segmented/segmented.component.ts b/components/segmented/segmented.component.ts
@@ -69,7 +69,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'segmented';
     '[class.ant-segmented-rtl]': `dir === 'rtl'`,
     '[class.ant-segmented-lg]': `nzSize === 'large'`,
     '[class.ant-segmented-sm]': `nzSize === 'small'`,
-    '[class.ant-segmented-block]': `nzBlock`
+    '[class.ant-segmented-block]': `nzBlock`,
+    '[class.ant-segmented-vertical]': `nzVertical`
   },
   providers: [
     NzSegmentedService,
@@ -93,6 +94,7 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
   @Input({ transform: booleanAttribute }) nzBlock: boolean = false;
   @Input({ transform: booleanAttribute }) nzDisabled = false;
   @Input() nzOptions: NzSegmentedOptions = [];
+  @Input({ transform: booleanAttribute }) nzVertical: boolean = false;
   @Input() @WithConfig() nzSize: NzSizeLDSType = 'default';
 
   @Output() readonly nzValueChange = new EventEmitter<number | string>();
@@ -127,17 +129,31 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
     });
 
     this.service.activated$.pipe(bufferCount(2, 1), takeUntilDestroyed()).subscribe(elements => {
-      this.animationState = {
-        value: 'from',
-        params: thumbAnimationParamsOf(elements[0])
-      };
-      this.cdr.detectChanges();
-
-      this.animationState = {
-        value: 'to',
-        params: thumbAnimationParamsOf(elements[1])
-      };
-      this.cdr.detectChanges();
+      if (this.nzVertical) {
+        this.animationState = {
+          value: 'fromVertical',
+          params: thumbAnimationParamsOf(elements[0], true)
+        };
+        this.cdr.detectChanges();
+
+        this.animationState = {
+          value: 'toVertical',
+          params: thumbAnimationParamsOf(elements[1], true)
+        };
+        this.cdr.detectChanges();
+      } else {
+        this.animationState = {
+          value: 'from',
+          params: thumbAnimationParamsOf(elements[0])
+        };
+        this.cdr.detectChanges();
+
+        this.animationState = {
+          value: 'to',
+          params: thumbAnimationParamsOf(elements[1])
+        };
+        this.cdr.detectChanges();
+      }
     });
 
     effect(() => {
@@ -167,7 +183,7 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
   }
 
   handleThumbAnimationDone(event: AnimationEvent): void {
-    if (event.toState === 'to') {
+    if (event.toState === 'to' || event.toState === 'toVertical') {
       this.animationState = null;
     }
     this.service.animationDone$.next(event);
@@ -191,7 +207,15 @@ export class NzSegmentedComponent implements OnChanges, ControlValueAccessor {
   }
 }
 
-function thumbAnimationParamsOf(element?: HTMLElement): ThumbAnimationProps {
+function thumbAnimationParamsOf(element?: HTMLElement, vertical: boolean = false): ThumbAnimationProps {
+  if (vertical) {
+    return {
+      transform: element?.offsetTop ?? 0,
+      width: element?.clientWidth ?? 0,
+      height: element?.clientHeight ?? 0,
+      vertical
+    };
+  }
   return {
     transform: element?.offsetLeft ?? 0,
     width: element?.clientWidth ?? 0
diff --git a/components/segmented/segmented.spec.ts b/components/segmented/segmented.spec.ts
@@ -4,7 +4,7 @@
  */
 
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
@@ -55,6 +55,14 @@ describe('nz-segmented', () => {
       expect(segmentedElement.classList).toContain('ant-segmented-sm');
     });
 
+    it('should support vertical mode', () => {
+      const segmentedElement: HTMLElement = segmentedComponent.nativeElement;
+      expect(segmentedElement.classList).not.toContain('ant-segmented-vertical');
+      component.vertical = true;
+      fixture.detectChanges();
+      expect(segmentedElement.classList).toContain('ant-segmented-vertical');
+    });
+
     it('should be auto selected the first option when if no value is set', async () => {
       const theFirstElement = getSegmentedOptionByIndex(0);
       await fixture.whenStable();
@@ -132,6 +140,33 @@ describe('nz-segmented', () => {
       expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
       expect(theSecondElement.classList).not.toContain('ant-segmented-item-selected');
     });
+
+    it('should animate thumb correctly in vertical mode', fakeAsync(() => {
+      component.vertical = true;
+      fixture.detectChanges();
+
+      const segmentedComponentInstance = fixture.debugElement.query(
+        By.directive(NzSegmentedComponent)
+      ).componentInstance;
+
+      expect(segmentedComponentInstance.nzVertical).toBe(true);
+
+      const theSecondElement = getSegmentedOptionByIndex(1);
+
+      tick(100);
+      fixture.detectChanges();
+
+      dispatchMouseEvent(theSecondElement, 'click');
+      tick(100);
+      fixture.detectChanges();
+
+      expect(theSecondElement.classList).toContain('ant-segmented-item-selected');
+      expect(segmentedComponentInstance.animationState).toBeDefined();
+
+      if (segmentedComponentInstance.animationState) {
+        expect(['fromVertical', 'toVertical']).toContain(segmentedComponentInstance.animationState.value);
+      }
+    }));
   });
 
   describe('ng model', () => {
@@ -217,6 +252,54 @@ describe('nz-segmented', () => {
       expect(theThirdElement.classList).toContain('ant-segmented-item-selected');
     });
   });
+
+  describe('vertical segmented', () => {
+    let fixture: ComponentFixture<NzSegmentedVerticalTestComponent>;
+    let component: NzSegmentedVerticalTestComponent;
+    let segmentedComponent: DebugElement;
+
+    function getSegmentedOptionByIndex(index: number): HTMLElement {
+      return segmentedComponent.nativeElement.querySelectorAll('.ant-segmented-item')[index];
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [provideNoopAnimations()]
+      });
+      fixture = TestBed.createComponent(NzSegmentedVerticalTestComponent);
+      component = fixture.componentInstance;
+      spyOn(component, 'handleValueChange');
+      segmentedComponent = fixture.debugElement.query(By.directive(NzSegmentedComponent));
+      fixture.detectChanges();
+    });
+
+    it('should render in vertical mode', () => {
+      const segmentedElement: HTMLElement = segmentedComponent.nativeElement;
+      expect(segmentedElement.classList).toContain('ant-segmented-vertical');
+      const groupElement = segmentedElement.querySelector('.ant-segmented-group') as HTMLElement;
+      expect(groupElement).toBeTruthy();
+    });
+
+    it('should change selection in vertical mode', async () => {
+      const theFirstElement = getSegmentedOptionByIndex(0);
+      const theSecondElement = getSegmentedOptionByIndex(1);
+
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(theFirstElement.classList).toContain('ant-segmented-item-selected');
+      expect(component.handleValueChange).toHaveBeenCalledTimes(0);
+
+      dispatchMouseEvent(theSecondElement, 'click');
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(theFirstElement.classList).not.toContain('ant-segmented-item-selected');
+      expect(theSecondElement.classList).toContain('ant-segmented-item-selected');
+      expect(component.handleValueChange).toHaveBeenCalledTimes(1);
+      expect(component.handleValueChange).toHaveBeenCalledWith('Weekly');
+    });
+  });
 });
 
 @Component({
@@ -227,15 +310,17 @@ describe('nz-segmented', () => {
       [nzOptions]="options"
       [nzDisabled]="disabled"
       [nzBlock]="block"
+      [nzVertical]="vertical"
       (nzValueChange)="handleValueChange($event)"
-    ></nz-segmented>
+    />
   `
 })
 export class NzSegmentedTestComponent {
   size: NzSizeLDSType = 'default';
   options: NzSegmentedOptions = [1, 2, 3];
   block = false;
   disabled = false;
+  vertical = false;
 
   handleValueChange(_e: string | number): void {
     // empty
@@ -263,3 +348,15 @@ export class NzSegmentedInReactiveFormTestComponent {
   options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
   formControl = new FormControl('Weekly');
 }
+
+@Component({
+  imports: [FormsModule, NzSegmentedModule],
+  template: ` <nz-segmented [nzOptions]="options" [nzVertical]="true" (nzValueChange)="handleValueChange($event)" /> `
+})
+export class NzSegmentedVerticalTestComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+
+  handleValueChange(_e: string | number): void {
+    return void 0;
+  }
+}
diff --git a/components/segmented/style/index.less b/components/segmented/style/index.less
@@ -23,6 +23,25 @@
     width: 100%;
   }
 
+  &-vertical {
+    .@{segmented-prefix-cls}-group {
+      flex-direction: column;
+    }
+
+    .@{segmented-prefix-cls}-thumb {
+      width: 100%;
+      height: 0;
+    }
+
+    .@{segmented-prefix-cls}-thumb-motion-appear-active {
+      transition:
+        transform 0.3s @ease-in-out,
+        width 0.3s @ease-in-out,
+        height 0.3s @ease-in-out;
+      will-change: transform, width, height;
+    }
+  }
+
   // block styles
   &&-block {
     display: flex;
@@ -114,7 +133,9 @@
 
   // transition effect when `appear-active`
   &-thumb-motion-appear-active {
-    transition: transform 0.3s @ease-in-out, width 0.3s @ease-in-out;
+    transition:
+      transform 0.3s @ease-in-out,
+      width 0.3s @ease-in-out;
     will-change: transform, width;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ export class NzSegmentedItemComponent implements OnInit {`
`77`	`77`	`}),`
`78`	`78`	`switchMap(value =>`
`79`	`79`	`this.service.animationDone$.pipe(`
`80`		`- filter(event => event.toState === 'to'),`
	`80`	`+ filter(event => event.toState === 'to' \|\| event.toState === 'toVertical'),`
`81`	`81`	`take(1),`
`82`	`82`	`map(() => value)`
`83`	`83`	`)`