UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文以 ng-zorro-antd 的nz-segmented组件分段控制器基于 Ant Design 的 Segmented 设计为核心围绕其官方「基本用法」Demo 展开你将学会如何用最简代码渲染一组互斥选项、监听选中变化并理解其底层的选项归一化、滑块thumb动画、键盘导航与ngModel双向绑定机制。读完即可在真实项目中直接落地并知道遇到问题该去翻哪些源码文件。一、Segmented 是什么什么时候用nz-segmented是 ng-zorro-antd 提供的数据展示类组件官方类型归属见 doc/index.zh-CN.md 的type: 数据展示用于展示多个选项并允许用户选择其中单个选项。它的典型应用场景有两条用于展示多个选项并允许用户从中选择一个当切换选中选项时联动区域如下方列表、图表的内容随之变化。它在外观上是一组紧凑的按钮式分段条选中项带有一个可滑动的背景块thumb比原生 radio 更适合做「视图切换器」「时间粒度切换」这类高频交互。二、基本用法最快上手路径官方「基本」Demo 位于 components/segmented/demo/basic.md对应的可运行示例代码在 components/segmented/demo/basic.ts。完整代码如下import { Component } from angular/core; import { NzSegmentedModule } from ng-zorro-antd/segmented; Component({ selector: nz-demo-segmented-basic, imports: [NzSegmentedModule], template: nz-segmented [nzOptions]options (nzValueChange)handleValueChange($event) / }) export class NzDemoSegmentedBasicComponent { options [Daily, Weekly, Monthly, Quarterly, Yearly]; handleValueChange(e: string | number): void { console.log(e); } }三个要点即可跑通引入模块在组件imports中或在 NgModule 时代放入imports: [NzSegmentedModule]引入NzSegmentedModule其导出内容见 components/segmented/public-api.ts包含NzSegmentedComponent、NzSegmentedItemComponent、NzSegmentedModule及全部类型定义。传选项通过[nzOptions]传入选项数组。最简单的形式就是字符串数组[Daily, Weekly, ...]每个字符串同时充当显示文案与选中值。监听变化通过(nzValueChange)订阅选中值变更回调参数类型为string | number。选项的三种写法根据 types.ts 的类型定义nzOptionsNzSegmentedOptions支持以下三种形式string[]如[Daily, Weekly]元素既是label又是valuenumber[]数值型选项适合作为序号或索引使用Array{ label: string; value: string | number; icon: string; disabled?: boolean }对象形式可携带图标与单项禁用标记。对象形式的示例来自 demo/icon.tsoptions [ { label: List, value: List, icon: bars }, { label: Kanban, value: Kanban, icon: appstore } ];源码级补充选项是如何被归一化的组件内部会把上述三种写法统一转换为标准对象。核心逻辑在 types.ts 的normalizeOptions函数export function normalizeOptions(unnormalized: NzSegmentedOptions): NzSegmentedOption[] { return unnormalized.map(item { if (typeof item string || typeof item number) { return { label: ${item}, value: item }; } return item; }); }即字符串/数字会被自动包装成{ label: String(item), value: item }对象则原样透传。该函数在 segmented.component.ts 的ngOnChanges中于每次nzOptions变化时重新执行所以选项支持动态更新参考 demo/dynamic.ts 中点击按钮追加Quarterly, Yearly的用法。三、API 全景nz-segmented 全部参数官方 API 表来自 doc/index.zh-CN.md逐项展开如下参数说明类型默认值全局配置版本[nzBlock]将宽度调整为父元素宽度booleanfalse[nzDisabled]是否禁用booleanfalse[nzOptions]数据化配置选项内容string[] \| number[] \| Array{ label; value; icon; disabled? }-[nzSize]控件尺寸large \| default \| small-✅[nzShape]形状default \| rounddefault20.3.0[nzVertical]排列方向纵向booleanfalse20.2.0[nzName]所有input[typeradio]的name属性string-20.3.0[ngModel]当前选中项目的 valuestring \| number-(nzValueChange)选中项变化时触发回调EventEmitterstring \| number-(ngModelChange)选中项变化时触发回调配合 ngModelEventEmitterstring \| number-逐项实战说明nzBlock设为true时组件占满父容器整行宽度选项均分样式类ant-segmented-block见 demo/block.ts。nzDisabled整体禁用。也可以只禁用某个单项——在选项对象里写disabled: true见 demo/disabled.ts。源码中组件级禁用通过setDisabledState与service.disabled$同步给每个 item见 segmented.component.ts 与 segmented.service.ts。nzSizelarge | default | small对应样式类ant-segmented-lg/ant-segmented-sm见 demo/size.ts。该参数标注为支持全局配置✅意味着可通过NzConfigService的nzSegmented全局统一默认尺寸。nzShapedefault为直角矩形round为圆角胶囊形20.3.0 新增样式类为ant-segmented-shape-round见 demo/shape.ts。nzVertical纵向排列20.2.0 新增适合窄屏或侧边工具栏见 demo/vertical.ts。nzName给内部每个input[typeradio]设置统一的name属性20.3.0 新增用于表单提交与无障碍分组见 demo/with-name.ts。ngModel/ngModelChange双向绑定选中值见下文「表单集成」。自定义单项label[nz-segmented-item]当内置nzOptions无法满足复杂内容如嵌入头像、两行文字时可直接在nz-segmented内部手写label[nz-segmented-item]参考 demo/custom.tsnz-segmented label nz-segmented-item nzValueuser1 nz-avatar nzSrc... / divUser 1/div /label label nz-segmented-item nzValueuser2 nzIconuser divUser 2/div /label /nz-segmented对应 API同样来自 doc/index.zh-CN.md参数说明类型默认值[nzIcon]图标string-[nzValue]值string \| number-[nzDisabled]是否禁用booleanfalse从源码看segmented-item.component.ts 中nzValue是必填输入input.requirednzIcon可选组件会渲染一个真实input typeradio用于承载语义与表单状态。四、与表单集成ngModel 双向绑定在ReactiveFormsModule/FormsModule场景下nz-segmented实现了 Angular 的ControlValueAccessor接口见 segmented.component.ts 中providers里的NG_VALUE_ACCESSOR注册因此可直接使用ngModel双向绑定。官方示例来自 demo/value.tsimport { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzSegmentedModule } from ng-zorro-antd/segmented; Component({ selector: nz-demo-segmented-value, imports: [FormsModule, NzSegmentedModule], template: nz-segmented [nzOptions]options [(ngModel)]selectedValue (ngModelChange)handleModelChange($event) / br / Selected value: {{ selectedValue() }} }) export class NzDemoSegmentedValueComponent { readonly selectedValue signal(Weekly); readonly options [Daily, Weekly, Monthly, Quarterly, Yearly]; handleModelChange(value: string): void { console.log(value); } }要点初始值Weekly会通过writeValue写入组件源码中调用service.selected$.next(value)用户切换后组件依次触发nzValueChange、onChange即ngModelChange如果初始值不在nzOptions中组件会在渲染完成后自动选中第一个可用项——对应 segmented.component.ts 中afterNextRender内的逻辑判断value undefined或选项中不存在该 value 时回退到itemCmps[0]。这一点也从 segmented.spec.ts 的用例默认选中第一项、切换后第一项取消选中得到验证。五、交互与无障碍键盘导航、滑块动画与语义键盘方向键切换Segmented 支持用方向键在选项间移动源码见 segmented.component.ts 的onKeyDown/onOffset←/→横向切换↑/↓纵向切换在 RTL 环境下左右方向自动取反通过注入Directionality判断遇到禁用项会继续向后跳过且做了循环保护避免死循环逻辑上以当前选中项为起点计算偏移并对total取模实现首尾循环。滑块thumb动画原理选中高亮并非简单的样式切换而是一个可滑动的背景块。核心链路在 segmented.service.ts 与 segmented.component.ts用户点击 item →service.selected$与service.change$发出新值各 item 监听selected$匹配到自己时通过service.activated$上报自身 DOM 元素组件用calcThumbStyle计算目标项的left/width/top/height再用transform: translateX/translateY驱动滑块位移动画结束后transitionend事件把animating$置回false此时才真正给选中项加上ant-segmented-item-selected高亮类见 segmented-item.component.ts 中showThumb() isChecked()的条件。需要注意的是滑块仅在动画开启时显示showThumb animationEnabled() animating()如果全局关闭了动画组件会退化为纯高亮切换行为依然正确。无障碍a11y组件根节点带有roleradiogroup、aria-labelsegmented control每个选项内部渲染真实的input typeradio点击时会stopPropagation避免双重触发。这与「nzName 统一 radio name」配合构成了完整的单选组语义便于屏幕阅读器与表单提交识别。六、写在最后遇到问题看哪里想改选中逻辑、动画或键盘行为看 segmented.component.ts想看单个选项如何渲染 radio 与图标看 segmented-item.component.ts想看选项类型定义与归一化看 types.ts想看组件间通信的 RxJS 流与默认 radio name看 segmented.service.ts想验证行为正确性官方测试覆盖了nzBlock、nzSize、nzVertical、nzShape、默认选中、切换高亮、禁用等场景见 segmented.spec.ts想批量参考全部用法components/segmented/demo/目录下还有 block、custom、disabled、dynamic、icon、shape、size、value、vertical、with-icon-only、with-name 共 11 个配套示例。从最简单的[nzOptions]字符串数组到自定义 item、双向绑定与键盘导航nz-segmented用一套紧凑的 API 覆盖了单选切换的绝大多数场景适合作为列表页/仪表盘中的视图切换控件直接投入使用。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Popover 气泡卡片组件入门从基本用法到源码级原理ng zorro antd Popover 气泡卡片组件入门从基本用法到源码级原理 Popover 是 ng zorro antd 中基于 Ant DesigUI组件前端OfficeCLI一个二进制让AI代理免装Office读写Word/Excel/PPTOfficeCLI一个二进制让AI代理免装Office读写Word/Excel/PPT OfficeCLI 是一个为 AI 代理设计的办公自动化命令行工具UI组件前端ng-zorro-antd 入门 Alert 警告提示组件从基本用法到源码级剖析ng zorro antd 入门 Alert 警告提示组件从基本用法到源码级剖析 导读 本文以 ng zorro antd 官方 Alert 组件「基本BUI组件前端上一篇Ferret终极指南如何实现多模态AI中任意区域的精准定位与理解下一篇EthereumPool深度探索以太坊矿池的工作流程与优化技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考