feat(module:segmented): implement new component (#7404)

* feat(module:segmented): implement new component

* test: add test for segmented component

* chore: code update

* fix: fix doc

* feat: add dark mode theme

* fix: fix export

* fix: fix import

Author: hullis

.github/CODEOWNERS

@@ -37,6 +37,7 @@ components/statistic/**                   @hullis
 components/timeline/**                    @hullis
 components/tooltip/**                     @hullis
 components/code-editor/**                 @hullis
+components/segmented/**                   @hullis
 components/calendar/**                    @wenqi73
 components/date-picker/**                 @wenqi73
 components/skeleton/**                    @wenqi73

components/components.less

@@ -37,6 +37,7 @@
 @import "./radio/style/entry.less";
 @import "./rate/style/entry.less";
 @import "./select/style/entry.less";
+@import "./segmented/style/index.less";
 @import "./skeleton/style/entry.less";
 @import "./slider/style/entry.less";
 @import "./spin/style/entry.less";

components/core/animation/public-api.ts

@@ -11,3 +11,4 @@ export * from './move';
 export * from './notification';
 export * from './slide';
 export * from './zoom';
+export * from './thumb';

components/core/animation/thumb.ts

@@ -0,0 +1,28 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';
+
+import { AnimationCurves } from './animation-consts';
+
+/**
+ * a move and resize transition in the horizontal direction
+ */
+export interface ThumbAnimationProps {
+  transform: number;
+  width: number;
+}
+
+export const thumbMotion: AnimationTriggerMetadata = trigger('thumbMotion', [
+  state('from', style({ transform: 'translateX({{ transform }}px)', width: '{{ width }}px' }), {
+    params: { transform: 0, width: 0 }
+  }),
+
+  state('to', style({ transform: 'translateX({{ transform }}px)', width: '{{ width }}px' }), {
+    params: { transform: 100, width: 0 }
+  }),
+
+  transition('from => to', animate(`300ms ${AnimationCurves.EASE_IN_OUT}`))
+]);

components/core/config/config.ts

@@ -56,6 +56,7 @@ export interface NzConfig {
   pagination?: PaginationConfig;
   progress?: ProgressConfig;
   rate?: RateConfig;
+  segmented?: SegmentedConfig;
   space?: SpaceConfig;
   spin?: SpinConfig;
   switch?: SwitchConfig;
@@ -252,6 +253,10 @@ export interface RateConfig {
   nzAllowHalf?: boolean;
 }
 
+export interface SegmentedConfig {
+  nzSize?: NzSizeLDSType;
+}
+
 export interface SpaceConfig {
   nzSize?: 'small' | 'middle' | 'large' | number;
 }

components/segmented/demo/basic.md

@@ -0,0 +1,15 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic usage
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Basic Usage.
+

components/segmented/demo/basic.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-basic',
+  template: `<nz-segmented [nzOptions]="options" (nzValueChange)="handleIndexChange($event)"></nz-segmented>`,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .code-box-demo .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedBasicComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+
+  handleIndexChange(e: number): void {
+    console.log(e);
+  }
+}

components/segmented/demo/block.md

@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh-CN: Block 分段选择器
+  en-US: Block Segmented
+---
+
+## zh-CN
+
+`nzBlock` 属性使其适合父元素宽度。
+
+## en-US
+
+`nzBlock` property will make the `Segmented` fit to its parent width.

components/segmented/demo/block.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-block',
+  template: `<nz-segmented [nzOptions]="options" [nzBlock]="true"></nz-segmented>`,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .code-box-demo .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedBlockComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+}

components/segmented/demo/custom.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 自定义渲染
+  en-US: Custom Render
+---
+
+## zh-CN
+
+使用 nzLabelTemplate 自定义渲染每一个 Segmented Item。
+
+## en-US
+
+Custom each Segmented Item by nzLabelTemplate.