UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载nz-segmented分段控制器是 ng-zorro-antd 中用于展示多个选项并允许用户选择单个选项的数据展示组件。本文聚焦其胶囊形状Round Shape特性自 v20.3.0 起通过nzShaperound即可让 Segmented 呈现圆角胶囊外观视觉上更接近移动端风格的连续分段按钮。读完本文你将掌握nzShape参数的用法、它与尺寸/图标/禁用等特性的组合方式并理解胶囊样式在组件源码与样式表中的实现原理。一、功能概览什么是胶囊形状在 shape.md 的演示中胶囊形状的 Segmented 被描述为胶囊型的 SegmentedRound shape of Segmented。与默认的方形直角外观不同胶囊形状通过将容器、选项项与滑块thumb的圆角统一放大为全圆border-radius: 9999px形成类似药丸/胶囊的圆润观感特别适合工具条、视图切换器等紧凑型选择场景。该能力由nzShape输入属性控制其取值与默认值在 Segmented 组件文档 中定义如下参数说明类型默认值全局配置版本[nzShape]形状default \| rounddefault-20.3.0可以看到nzShape仅有两个合法取值default直角圆角组件默认外观与round胶囊圆角并在 20.3.0 版本中引入。二、完整用法示例继承官方 Demo官方演示代码位于 shape.ts它展示了一个颇具实战价值的组合场景用一个 Segmented 切换尺寸另一个 Segmented 以胶囊形状实时响应该尺寸。完整代码可直接复制运行import { Component, model } from angular/core; import { FormsModule } from angular/forms; import { NzSizeLDSType } from ng-zorro-antd/core/types; import { NzSegmentedModule } from ng-zorro-antd/segmented; Component({ selector: nz-demo-segmented-shape, imports: [NzSegmentedModule, FormsModule], template: nz-segmented [nzOptions]optionsSize [(ngModel)]currentSize / nz-segmented [nzOptions]options nzShaperound [nzSize]currentSize() / , styles: nz-segmented:first-child { display: block; width: fit-content; margin-bottom: 16px; } }) export class NzDemoSegmentedShapeComponent { currentSize modelNzSizeLDSType(default); optionsSize [ { value: small, label: Small }, { value: default, label: Medium }, { value: large, label: Large } ]; options [ { value: List, icon: bars }, { value: Kanban, icon: appstore } ]; }关键点拆解仅需一行属性nzShaperound写在nz-segmented标签上即可启用胶囊形状无需任何额外样式覆盖。图标与胶囊的组合第二个 Segmented 的选项使用对象形式{ value, icon }即仅图标无文字的选项形态NzSegmentedWithIcon见 types.ts。胶囊形状对图标项同样生效圆角作用于每个选项项内部。尺寸动态联动第一个 Segmented 通过[(ngModel)]currentSize双向绑定尺寸值small | default | large第二个 Segmented 通过[nzSize]currentSize()接收信号值实现胶囊形状 任意尺寸的实时切换。注意这里使用了 Angular 的model()信号语法与组件间属性绑定说明胶囊形状与nzSize完全正交、可自由组合。布局微调Demo 中对第一个 Segmented 设置了display: block; width: fit-content并留出 16px 下边距使其与下方的胶囊形状示例垂直堆叠避免inline-block默认行为带来的并排布局。这是官方 Demo 中值得借鉴的排版细节。三、API 细节与数据类型胶囊形状本质上是NzSegmentedComponent的一个输入属性其在 segmented.component.ts 中的定义如下Input() nzShape: default | round default;默认值default即不设置nzShape时组件保持标准外观类型收窄仅接受字面量联合类型default | roundTypeScript 会在编译期拦截非法取值如nzShapepill。同一组件还提供以下与外观密切相关的输入胶囊形状常与它们组合使用完整 API 见 doc/index.zh-CN.md参数说明类型默认值备注[nzBlock]将宽度调整为父元素宽度booleanfalse胶囊 撑满父级可形成通栏工具条[nzDisabled]是否禁用booleanfalse禁用态保留圆角外观[nzOptions]数据化配置选项内容string[] \| number[] \| Array{ label; value; icon?; disabled? }-见下节选项类型[nzSize]控件尺寸large \| default \| small-支持全局配置✅[nzVertical]排列方向booleanfalsev20.2.0 引入胶囊形状同样适用于垂直排列[nzName]所有input[typeradio]的name属性string-v20.3.0 引入[ngModel]当前选中项的 valuestring \| number-双向绑定(nzValueChange)选中项变化回调EventEmitterstring \| number-事件输出选项数据类型nzOptions支持三种写法types.tsexport type NzSegmentedOption { value: string | number; disabled?: boolean; } (NzSegmentedWithLabel | NzSegmentedWithIcon); export type NzSegmentedOptions ArrayNzSegmentedOption | string | number;纯字符串/数字数组[List, Kanban]由normalizeOptions自动归一化为{ label, value }对象数组带 label[{ label: List, value: List, disabled?: boolean }]对象数组仅图标[{ icon: bars, value: List }]如 Demo 中所示。四、源码级实现原理4.1 样式类绑定胶囊形状的实现非常轻量核心在 segmented.component.ts 的宿主绑定上host: { class: ant-segmented, ... [class.ant-segmented-shape-round]: nzShape round, ... }当nzShape round时组件根元素被加上ant-segmented-shape-round类Angular 的类绑定会在属性变化时自动增删该类无需手动操作 DOM。4.2 样式表定义胶囊外观的具体样式在 style/index.less-shape-round { border-radius: 9999px; .{segmented-prefix-cls}-item { border-radius: 9999px; } .{segmented-prefix-cls}-thumb { border-radius: 9999px; } }三处圆角缺一不可容器本身border-radius: 9999px配合组件根元素默认的padding: 2pxsegmented-container-padding形成胶囊外壳每个选项项ant-segmented-item圆角保证选项文字/图标区域在胶囊内同样圆润滑块 thumbant-segmented-thumb这是选中态的游标背景由 segmented.component.ts 中的calcThumbStyle/getThumbStyle动态计算transform: translateX/translateY与宽高配合ant-segmented-thumb-motion-appear-active过渡类实现平滑滑动。若不给 thumb 加圆角胶囊内滑动的选中背景就会出现尖角破绽。选择9999px而非固定数值是为了让圆角始终大于等于任意容器尺寸的一半从而在任何宽度包括极窄图标项下都能呈现完美胶囊。4.3 与动画系统的关系滑块动画由 segmented.service.ts 中的animating$、activated$等 Subject 驱动showThumb computed(() this.animationEnabled() this._animating())控制滑块是否渲染。胶囊形状不改变动画逻辑只改变选中背景的形状因此在切换选项时胶囊内的滑块仍会执行平滑过渡。五、测试验证胶囊形状的行为保证segmented.spec.ts 中有针对该特性的专门测试用例it(should support round shape and trigger animation state on interaction, async () { const segmentedElement: HTMLElement segmentedComponent.nativeElement; expect(segmentedElement.classList).not.toContain(ant-segmented-shape-round); component.shape.set(round); fixture.detectChanges(); expect(segmentedElement.classList).toContain(ant-segmented-shape-round); const theSecondElement getSegmentedOptionByIndex(1); await stabilize(fixture); dispatchMouseEvent(theSecondElement, click); await stabilize(fixture, 100); expect(segmentedElement.classList).toContain(ant-segmented-shape-round); });该用例验证了两个行为保证默认不启用未设置nzShape时根元素不含ant-segmented-shape-round类确保向后兼容切换即生效将 shape 设为round后类名立即出现并且在用户点击切换选项、滑块动画执行完毕之后圆角类依然保留——证明胶囊形状与交互/动画流程互不干扰用户可以放心在胶囊形态下正常切换选项。六、实战组合建议结合 Demo 与源码以下组合在胶囊形状下均有可靠表现胶囊 尺寸切换如官方 Demo 所示用外层 Segmented 或信号控制nzSizesmall/default/large三种尺寸下胶囊圆角均正确渲染尺寸样式见 style/index.less 中的-lg、-sm规则胶囊 仅图标选项options [{ value: List, icon: bars }]图标项本身具备最小宽度胶囊依然成立适合紧凑工具栏胶囊 nzBlocknzBlock让组件撑满父容器宽度胶囊拉伸后仍保持两端全圆适合表单中的整行分段选择胶囊 禁用态nzDisabled或选项级disabled: true均保留圆角外观仅改变交互状态。七、注意事项版本前提nzShape自20.3.0起提供使用前请确认项目依赖的 ng-zorro-antd 版本不低于该版本组件包版本信息见 package.json 与 public-api.ts取值约束nzShape只接受default | round没有其他中间形态若需要更复杂的圆角自定义如 8px 圆角应通过样式覆盖ant-segmented的border-radius实现而非依赖nzShape无需额外样式启用胶囊形状不需要引入任何额外 CSS样式已随NzSegmentedModule一同打包模块定义见 segmented.module.ts。八、结语胶囊形状是 ng-zorro-antd Segmented 组件在 20.3.0 引入的轻量外观能力一行nzShaperound即可获得容器、选项项与滑动选中背景全部圆角化的胶囊视觉效果且与尺寸、图标、禁用、块级等特性天然兼容。从 宿主类绑定 到 样式表再到 测试用例 的行为保证整条实现链路清晰完整。若你的界面需要更柔和、更贴近移动端风格的分段切换控件胶囊形状是开箱即用的首选方案。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐OfficeCLI一个二进制让AI代理免装Office读写Word/Excel/PPTOfficeCLI一个二进制让AI代理免装Office读写Word/Excel/PPT OfficeCLI 是一个为 AI 代理设计的办公自动化命令行工具UI组件前端ng-zorro-antd FloatButton 形状详解用 nzShape 在圆形与方形之间切换ng zorro antd FloatButton 形状详解用 nzShape 在圆形与方形之间切换 导读 nz float button 浮动按钮是 nUI组件前端ng-zorro-antd Segmented 垂直方向nzVertical使用指南与源码实现解析ng zorro antd Segmented 垂直方向nzVertical使用指南与源码实现解析 导读 本篇文章聚焦 ng zorro antd SegmUI组件前端上一篇statsmodels 0.10.1 版本发布解析bug 修复清单与关键模块源码导读下一篇FixedDataTable完全指南如何在React中构建高性能大数据表格创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
Go 测试中的可控时间：clockwork 伪时钟库原理与实践（基于 origin 仓库） 测试云原生质量保障 【免费下载链接】origin Conformance test suite for OpenShift 项目地址： https://gitcode.com/gh_mirrors/or/origin 点击查看 免费下载 clockwork 是一个为 Go 提供「伪时钟（fake clock）」的轻量库：它把标… · 2026/9/28 2:57:35
ESP32-CAM图像传输全链路实战：从硬件接线到网页显示 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/28 2:57:22
上海青丽花园设计庭院全案设计实力如何 夜幕降临，不少别墅业主忙完一天的事，最放松的时刻，是站在自家院子里发一会儿呆。可对许多人来说，这份松弛里藏着一丝遗憾——院子还在，想象中的花园却迟迟没有到来。有人拿着效果图反复比对，却始终不敢确信… · 2026/9/28 2:57:22
剪映操作｜人物发丝抠不干净怎么办 适用对象：图片与素材处理任务的创作者。本文只处理“人物发丝抠不干净怎么办？”这一件事。先确定这一条要解决什么最稳的做法是：处理“人物发丝抠不干净怎么办？”，先保留原图/原片，用一张或一小段做样&… · 2026/9/28 3:31:15
顺义本土正骨名医——苏荫来的故事 在顺义本地骨伤正骨领域，有这样一位深耕三十余年的实力派老医者，一身古法正骨手艺，一手传承绝活，专治各类筋骨伤痛，凭借精准的手法、扎实的疗效、踏实的行医作风，深得邻里百姓信赖与认可。他就是杏园金方首… · 2026/9/28 3:29:27
2026实测百度网盘直链助手脚本，速度超越PanDownload工具 随着我们手头的各种文档和视频资料越来越大，网盘在数据流转中扮演的角色也越来越重要。不管是工作交接还是备份生活点滴，它都帮了我们不少忙。
不过在日常使用中，偶尔遇到下载变慢也确实会让人感到有些苦恼。面对这种现象我们除了可以配合Pa… · 2026/9/28 3:29:08
剪映操作｜输入文字后，能不能自动生成虚拟主播、配音和字幕 适用对象：AI视频生成任务的创作者。本文只处理“输入文字后，能不能自动生成虚拟主播、配音和字幕？”这一件事。先确定这一条要解决什么先给结论：处理“输入文字后，能不能自动生成虚拟主播、配音和字幕？”&a… · 2026/9/28 3:28:21
运算符 文件操作 6 运算符：算数运算: - * / % ////：整除%：求余比较运算：> < > < !赋值运算 ： - *a21
b2
a,bb,a#只适合python
print(a)#2
print(b)#21逻辑运算：and or not当and，or… · 2026/9/28 3:27:47
字符集和编码 bytes 5 字符集和编码ascii——编排了128个文字字符，只需要7个0和1就可以表示了——1 byte8 bitANSI——每个字符 16 bit，2byteGBK编码Unicode：万国码utf-8：最短的字节长度8 英文：8bit，1 byte总结：as… · 2026/9/28 3:27:28
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
制作网页比较方便的软件怎么选?一文搞懂避坑指南 制作网页比较方便的软件怎么选?一文搞懂避坑指南 很多老板一上来就问：做个网站多少钱？但我反问他：你的域名买了吗？服务器租了吗？他一脸懵。这就是典型的“域名服务器搞不懂”。别急，今天咱们不聊虚的，直接 一文搞懂 那些让你头秃的技术名词。… · 2026/9/28 0:00:06
婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 找婚恋网站建站公司，最怕的就是被坑高价。很多同行跟我吐槽，报价单上写得模棱两可，功能栏里全是“高级定制”、“专属UI”，结果落地全是套壳。今天不聊虚的，直接甩几个我经手的 实战案例… · 2026/9/28 0:00:19
济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 上周济南一个做建材的老板找我，脸都绿了。他的官网首页弹出了赌博广告，后台被植入了挖矿脚本。他慌得问我：“网站被黑挂马不知道怎么办？能不能直接找之前的外包公司要源码下载，看看哪里被动了手脚？… · 2026/9/28 0:00:25
