企业官网建设流程全解析

• UI组件
• 前端

Segmented 分段控制器是 ng-zorro-antd（Angular UI 组件库，基于 Ant Design）中用于展示多个选项并允许用户选择其中单个选项的数据展示组件。本文聚焦 Segmented 的三种预置尺寸（大、默认、小），结合官方 demo 与底层源码，说明nzSize的用法、各尺寸的实际高度规格、样式实现原理，以及如何让 Segmented 在不同页面密度下保持协调一致。读完本文，你将掌握在表格工具栏、表单、紧凑型页面中正确选用 Segmented 尺寸的完整方案。

一、三种尺寸总览

官方文档 components/segmented/demo/size.md 明确指出：Segmented 组件定义了三种尺寸，分别对应三种高度：

三种尺寸覆盖了从宽松展示到紧凑展示的典型场景：

• large（40px）：适合作为页面主操作区的醒目控件，或与大型输入框、大号按钮并列使用；
• default（32px）：标准尺寸，绝大多数常规页面、表单场景的首选；
• small（24px）：适合工具栏、表格内操作列、空间紧张的紧凑布局。

值得注意的是，这三种高度并非组件凭空定义，而是与 Ant Design 的输入框高度体系保持一致（大/默认/小输入框高度分别为 40/32/24px），这使得 Segmented 可以自然地和同一尺寸体系下的 Input、Select、Button 等控件并排对齐。

二、基础用法：一个 demo 展示三种尺寸

官方 demo components/segmented/demo/size.ts 用一个组件同时渲染了三个 Segmented，完整代码与用法如下：

import { Component } from '@angular/core'; import { NzSegmentedModule } from 'ng-zorro-antd/segmented'; @Component({ selector: 'nz-demo-segmented-size', imports: [NzSegmentedModule], template: ` <nz-segmented [nzOptions]="options" nzSize="small" /> <br /> <nz-segmented [nzOptions]="options" /> <br /> <nz-segmented [nzOptions]="options" nzSize="large" /> `, styles: ` .ant-segmented { margin-bottom: 10px; } ` }) export class NzDemoSegmentedSizeComponent { options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']; }

关键点拆解：

1. nzSize属性：通过nzSize="small"/nzSize="large"显式指定尺寸；不写nzSize时即使用默认尺寸（default）；
2. 数据化配置选项：[nzOptions]="options"传入字符串数组['Daily', 'Weekly', ...]。依据 components/segmented/types.ts 中的normalizeOptions实现，字符串或数字会被自动归一化为{ label: string; value: string | number }的对象结构；
3. 模块引入：demo 通过imports: [NzSegmentedModule]直接引入 components/segmented/segmented.module.ts 导出的NzSegmentedModule，即可在模板中使用nz-segmented组件；
4. 间距处理：demo 中为.ant-segmented设置了margin-bottom: 10px，用于纵向排布时区分相邻的两个控件。

三、nzSize API 详解

根据 components/segmented/doc/index.zh-CN.md 的 API 表格，nzSize的定义如下：

补充说明：

• 类型定义：nzSize的类型为NzSizeLDSType，定义于 components/core/types/size.ts：export type NzSizeLDSType = 'large' | 'default' | 'small';。这一类型被多个控件尺寸相关的组件（Input、Select 等）复用，保证了全库尺寸语义的统一；
• 支持全局配置：API 表格中nzSize标记为“全局配置 ✅”，表示可以通过 ng-zorro-antd 的全局配置服务统一设置 Segmented 的默认尺寸，无需在每个使用处重复书写nzSize。在源码层面，components/segmented/segmented.component.ts 中nzSize使用@Input() @WithConfig() nzSize: NzSizeLDSType = 'default'声明，并通过const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'segmented'关联到segmented这一全局配置项；
• 与表单的兼容：组件实现了ControlValueAccessor，nzSize仅控制视觉尺寸，不影响ngModel/ 响应式表单的值绑定与(nzValueChange)回调。

四、底层实现：尺寸是如何作用到 DOM 上的

从源码结构可以梳理出尺寸控制的完整链路：

1. 宿主类名映射：在 components/segmented/segmented.component.ts 的 host 绑定中：

   '[class.ant-segmented-lg]': `nzSize === 'large'`, '[class.ant-segmented-sm]': `nzSize === 'small'`,

   即nzSize="large"时给根元素追加ant-segmented-lg类，nzSize="small"时追加ant-segmented-sm类；default尺寸不加额外类；

2. 样式变量驱动：样式文件 components/segmented/style/index.less 中，尺寸类通过 Less 变量计算实际高度：

   &&-lg &-item-label { min-height: @input-height-lg - @segmented-container-padding * 2; padding: 0 @input-padding-horizontal-lg; font-size: @font-size-lg; line-height: @input-height-lg - @segmented-container-padding * 2; } &&-sm &-item-label { min-height: @input-height-sm - @segmented-container-padding * 2; padding: 0 @input-padding-horizontal-sm; line-height: @input-height-sm - @segmented-container-padding * 2; }

   其中@input-height-lg、@input-height-sm分别对应主题变量中的 40px、24px（默认项@input-height-base对应 32px），@segmented-container-padding为 2px 的容器内边距。因此选项标签的min-height与line-height由“输入框高度减去两侧容器内边距”得出，最终呈现的整体控件高度即文档所述的 40/32/24px；

3. 选中滑块同步适配：Segmented 的选中项通过绝对定位的ant-segmented-thumb滑块实现（components/segmented/style/index.less），滑块高度为 100%，因此会随容器尺寸自动适配三种高度，无需为每种尺寸单独编写滑块样式。

五、延伸：与 nzShape、nzBlock、nzVertical 的组合使用

尺寸属性可以与其他 Segmented 属性自由组合，常见搭配如下：

• nzSize+nzShape="round"：round形状（自 20.3.0 起支持）会将容器与选项的border-radius设置为9999px（见 components/segmented/style/index.less），大尺寸配合圆角形状常用于胶囊式筛选器；
• nzSize+nzBlock：nzBlock将宽度调整为父元素宽度（宿主类ant-segmented-block，配合flex: 1平分宽度），适合按钮组式布局；
• nzSize+nzVertical：nzVertical（自 20.2.0 起支持）将排列方向改为纵向，尺寸高度依然遵循三种规格；
• 保持尺寸一致性：当 Segmented 与 Input、Button 等控件处于同一表单行时，建议选择相同的尺寸档位（如都选large或都选small），由于它们共用同一套@input-height-*变量体系，能保证视觉高度严格对齐。

六、测试与验证

仓库中的单元测试 components/segmented/segmented.spec.ts 覆盖了尺寸相关行为，例如：

• 默认尺寸下不附加ant-segmented-lg/ant-segmented-sm类；
• 设置nzSize="large"或nzSize="small"后，根元素类名正确切换，组件仍能正常完成选项选中、值回传等交互。

这意味着你在调整尺寸时，选中逻辑、滑块动画、键盘方向键导航（左右/上下切换选项）等行为均不受影响，尺寸纯粹是视觉层级的控制，可以放心地在三种尺寸间切换而不必担心功能回归。

总结

Segmented 的三种尺寸（large40px /default32px /small24px）通过nzSize一个属性即可切换，其底层由NzSizeLDSType类型约束、host 类名映射与 Less 主题变量共同实现，并且支持全局配置统一设置。在实际项目中，只需为nz-segmented添加nzSize="large"或nzSize="small"，即可与周边控件形成一致的高度体系；不设置时则保持默认尺寸。相关的可运行 demo 与完整 API 说明可分别查阅 components/segmented/demo/size.ts 与 components/segmented/doc/index.zh-CN.md。

• UI组件
• 前端