UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载Segmented 分段控制器是 ng-zorro-antdAngular UI 组件库基于 Ant Design中用于展示多个选项并允许用户选择其中单个选项的数据展示组件。本文聚焦 Segmented 的三种预置尺寸大、默认、小结合官方 demo 与底层源码说明nzSize的用法、各尺寸的实际高度规格、样式实现原理以及如何让 Segmented 在不同页面密度下保持协调一致。读完本文你将掌握在表格工具栏、表单、紧凑型页面中正确选用 Segmented 尺寸的完整方案。一、三种尺寸总览官方文档 components/segmented/demo/size.md 明确指出Segmented 组件定义了三种尺寸分别对应三种高度尺寸取值说明高度large大尺寸40pxdefault默认尺寸32pxsmall小尺寸24px三种尺寸覆盖了从宽松展示到紧凑展示的典型场景large40px适合作为页面主操作区的醒目控件或与大型输入框、大号按钮并列使用default32px标准尺寸绝大多数常规页面、表单场景的首选small24px适合工具栏、表格内操作列、空间紧张的紧凑布局。值得注意的是这三种高度并非组件凭空定义而是与 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 nzSizesmall / br / nz-segmented [nzOptions]options / br / nz-segmented [nzOptions]options nzSizelarge / , styles: .ant-segmented { margin-bottom: 10px; } }) export class NzDemoSegmentedSizeComponent { options [Daily, Weekly, Monthly, Quarterly, Yearly]; }关键点拆解nzSize属性通过nzSizesmall/nzSizelarge显式指定尺寸不写nzSize时即使用默认尺寸default数据化配置选项[nzOptions]options传入字符串数组[Daily, Weekly, ...]。依据 components/segmented/types.ts 中的normalizeOptions实现字符串或数字会被自动归一化为{ label: string; value: string | number }的对象结构模块引入demo 通过imports: [NzSegmentedModule]直接引入 components/segmented/segmented.module.ts 导出的NzSegmentedModule即可在模板中使用nz-segmented组件间距处理demo 中为.ant-segmented设置了margin-bottom: 10px用于纵向排布时区分相邻的两个控件。三、nzSize API 详解根据 components/segmented/doc/index.zh-CN.md 的 API 表格nzSize的定义如下参数说明类型默认值全局配置[nzSize]控件尺寸large \| default \| smalldefault实际默认走全局配置✅补充说明类型定义nzSize的类型为NzSizeLDSType定义于 components/core/types/size.tsexport 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这一全局配置项与表单的兼容组件实现了ControlValueAccessornzSize仅控制视觉尺寸不影响ngModel/ 响应式表单的值绑定与(nzValueChange)回调。四、底层实现尺寸是如何作用到 DOM 上的从源码结构可以梳理出尺寸控制的完整链路宿主类名映射在 components/segmented/segmented.component.ts 的 host 绑定中[class.ant-segmented-lg]: nzSize large, [class.ant-segmented-sm]: nzSize small,即nzSizelarge时给根元素追加ant-segmented-lg类nzSizesmall时追加ant-segmented-sm类default尺寸不加额外类样式变量驱动样式文件 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对应 32pxsegmented-container-padding为 2px 的容器内边距。因此选项标签的min-height与line-height由“输入框高度减去两侧容器内边距”得出最终呈现的整体控件高度即文档所述的 40/32/24px选中滑块同步适配Segmented 的选中项通过绝对定位的ant-segmented-thumb滑块实现components/segmented/style/index.less滑块高度为 100%因此会随容器尺寸自动适配三种高度无需为每种尺寸单独编写滑块样式。五、延伸与 nzShape、nzBlock、nzVertical 的组合使用尺寸属性可以与其他 Segmented 属性自由组合常见搭配如下nzSizenzShaperoundround形状自 20.3.0 起支持会将容器与选项的border-radius设置为9999px见 components/segmented/style/index.less大尺寸配合圆角形状常用于胶囊式筛选器nzSizenzBlocknzBlock将宽度调整为父元素宽度宿主类ant-segmented-block配合flex: 1平分宽度适合按钮组式布局nzSizenzVerticalnzVertical自 20.2.0 起支持将排列方向改为纵向尺寸高度依然遵循三种规格保持尺寸一致性当 Segmented 与 Input、Button 等控件处于同一表单行时建议选择相同的尺寸档位如都选large或都选small由于它们共用同一套input-height-*变量体系能保证视觉高度严格对齐。六、测试与验证仓库中的单元测试 components/segmented/segmented.spec.ts 覆盖了尺寸相关行为例如默认尺寸下不附加ant-segmented-lg/ant-segmented-sm类设置nzSizelarge或nzSizesmall后根元素类名正确切换组件仍能正常完成选项选中、值回传等交互。这意味着你在调整尺寸时选中逻辑、滑块动画、键盘方向键导航左右/上下切换选项等行为均不受影响尺寸纯粹是视觉层级的控制可以放心地在三种尺寸间切换而不必担心功能回归。总结Segmented 的三种尺寸large40px /default32px /small24px通过nzSize一个属性即可切换其底层由NzSizeLDSType类型约束、host 类名映射与 Less 主题变量共同实现并且支持全局配置统一设置。在实际项目中只需为nz-segmented添加nzSizelarge或nzSizesmall即可与周边控件形成一致的高度体系不设置时则保持默认尺寸。相关的可运行 demo 与完整 API 说明可分别查阅 components/segmented/demo/size.ts 与 components/segmented/doc/index.zh-CN.md。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Spin 组件尺寸详解small / default / large 三种加载态的选型与实践ng zorro antd Spin 组件尺寸详解small / default / large 三种加载态的选型与实践 Spin加载中是 ng zorrUI组件前端ng-zorro-antd Select 尺寸指南nzSize 的 large / default / small 三种大小与实现原理ng zorro antd Select 尺寸指南nzSize 的 large / default / small 三种大小与实现原理 nzSize 是 ngUI组件前端ng-zorro-antd 数字输入框三种尺寸详解nzSize 的 large / default / small 用法与源码实现ng zorro antd 数字输入框三种尺寸详解nzSize 的 large / default / small 用法与源码实现 本文以 ng zorroUI组件前端上一篇DataRoom MCP协议详解如何通过AI工具实现智能大屏生成下一篇Flynn高可用设计实现99.99%平台 uptime的架构策略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ng-zorro-antd Segmented 三种尺寸（large / default / small）详解与实战
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载Segmented 分段控制器是 ng-zorro-antdAngular UI 组件库基于 Ant Design中用于展示多个选项并允许用户选择其中单个选项的数据展示组件。本文聚焦 Segmented 的三种预置尺寸大、默认、小结合官方 demo 与底层源码说明nzSize的用法、各尺寸的实际高度规格、样式实现原理以及如何让 Segmented 在不同页面密度下保持协调一致。读完本文你将掌握在表格工具栏、表单、紧凑型页面中正确选用 Segmented 尺寸的完整方案。一、三种尺寸总览官方文档 components/segmented/demo/size.md 明确指出Segmented 组件定义了三种尺寸分别对应三种高度尺寸取值说明高度large大尺寸40pxdefault默认尺寸32pxsmall小尺寸24px三种尺寸覆盖了从宽松展示到紧凑展示的典型场景large40px适合作为页面主操作区的醒目控件或与大型输入框、大号按钮并列使用default32px标准尺寸绝大多数常规页面、表单场景的首选small24px适合工具栏、表格内操作列、空间紧张的紧凑布局。值得注意的是这三种高度并非组件凭空定义而是与 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 nzSizesmall / br / nz-segmented [nzOptions]options / br / nz-segmented [nzOptions]options nzSizelarge / , styles: .ant-segmented { margin-bottom: 10px; } }) export class NzDemoSegmentedSizeComponent { options [Daily, Weekly, Monthly, Quarterly, Yearly]; }关键点拆解nzSize属性通过nzSizesmall/nzSizelarge显式指定尺寸不写nzSize时即使用默认尺寸default数据化配置选项[nzOptions]options传入字符串数组[Daily, Weekly, ...]。依据 components/segmented/types.ts 中的normalizeOptions实现字符串或数字会被自动归一化为{ label: string; value: string | number }的对象结构模块引入demo 通过imports: [NzSegmentedModule]直接引入 components/segmented/segmented.module.ts 导出的NzSegmentedModule即可在模板中使用nz-segmented组件间距处理demo 中为.ant-segmented设置了margin-bottom: 10px用于纵向排布时区分相邻的两个控件。三、nzSize API 详解根据 components/segmented/doc/index.zh-CN.md 的 API 表格nzSize的定义如下参数说明类型默认值全局配置[nzSize]控件尺寸large \| default \| smalldefault实际默认走全局配置✅补充说明类型定义nzSize的类型为NzSizeLDSType定义于 components/core/types/size.tsexport 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这一全局配置项与表单的兼容组件实现了ControlValueAccessornzSize仅控制视觉尺寸不影响ngModel/ 响应式表单的值绑定与(nzValueChange)回调。四、底层实现尺寸是如何作用到 DOM 上的从源码结构可以梳理出尺寸控制的完整链路宿主类名映射在 components/segmented/segmented.component.ts 的 host 绑定中[class.ant-segmented-lg]: nzSize large, [class.ant-segmented-sm]: nzSize small,即nzSizelarge时给根元素追加ant-segmented-lg类nzSizesmall时追加ant-segmented-sm类default尺寸不加额外类样式变量驱动样式文件 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对应 32pxsegmented-container-padding为 2px 的容器内边距。因此选项标签的min-height与line-height由“输入框高度减去两侧容器内边距”得出最终呈现的整体控件高度即文档所述的 40/32/24px选中滑块同步适配Segmented 的选中项通过绝对定位的ant-segmented-thumb滑块实现components/segmented/style/index.less滑块高度为 100%因此会随容器尺寸自动适配三种高度无需为每种尺寸单独编写滑块样式。五、延伸与 nzShape、nzBlock、nzVertical 的组合使用尺寸属性可以与其他 Segmented 属性自由组合常见搭配如下nzSizenzShaperoundround形状自 20.3.0 起支持会将容器与选项的border-radius设置为9999px见 components/segmented/style/index.less大尺寸配合圆角形状常用于胶囊式筛选器nzSizenzBlocknzBlock将宽度调整为父元素宽度宿主类ant-segmented-block配合flex: 1平分宽度适合按钮组式布局nzSizenzVerticalnzVertical自 20.2.0 起支持将排列方向改为纵向尺寸高度依然遵循三种规格保持尺寸一致性当 Segmented 与 Input、Button 等控件处于同一表单行时建议选择相同的尺寸档位如都选large或都选small由于它们共用同一套input-height-*变量体系能保证视觉高度严格对齐。六、测试与验证仓库中的单元测试 components/segmented/segmented.spec.ts 覆盖了尺寸相关行为例如默认尺寸下不附加ant-segmented-lg/ant-segmented-sm类设置nzSizelarge或nzSizesmall后根元素类名正确切换组件仍能正常完成选项选中、值回传等交互。这意味着你在调整尺寸时选中逻辑、滑块动画、键盘方向键导航左右/上下切换选项等行为均不受影响尺寸纯粹是视觉层级的控制可以放心地在三种尺寸间切换而不必担心功能回归。总结Segmented 的三种尺寸large40px /default32px /small24px通过nzSize一个属性即可切换其底层由NzSizeLDSType类型约束、host 类名映射与 Less 主题变量共同实现并且支持全局配置统一设置。在实际项目中只需为nz-segmented添加nzSizelarge或nzSizesmall即可与周边控件形成一致的高度体系不设置时则保持默认尺寸。相关的可运行 demo 与完整 API 说明可分别查阅 components/segmented/demo/size.ts 与 components/segmented/doc/index.zh-CN.md。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Spin 组件尺寸详解small / default / large 三种加载态的选型与实践ng zorro antd Spin 组件尺寸详解small / default / large 三种加载态的选型与实践 Spin加载中是 ng zorrUI组件前端ng-zorro-antd Select 尺寸指南nzSize 的 large / default / small 三种大小与实现原理ng zorro antd Select 尺寸指南nzSize 的 large / default / small 三种大小与实现原理 nzSize 是 ngUI组件前端ng-zorro-antd 数字输入框三种尺寸详解nzSize 的 large / default / small 用法与源码实现ng zorro antd 数字输入框三种尺寸详解nzSize 的 large / default / small 用法与源码实现 本文以 ng zorroUI组件前端上一篇DataRoom MCP协议详解如何通过AI工具实现智能大屏生成下一篇Flynn高可用设计实现99.99%平台 uptime的架构策略创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
