UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本文以 ng-zorro-antd 中 Cron Expressionnz-cron-expression组件的尺寸特性为主线完整继承官方示例文档「三种大小」的结论——输入框支持large40px、default32px和small24px三种尺寸——并结合组件源码、样式表与单元测试说明nzSize参数如何被声明、如何映射到具体的 CSS 类、以及如何被测试用例固化验证帮助你在表单中正确配置并深入理解这一尺寸体系。三种尺寸是什么官方示例文档 size.md 给出的核心结论只有两条输入框支持large40px、default32px和small24px三种尺寸英文表述为 There are three sizes of an CronExpression box即三种尺寸对应的是整个 Cron 表达式输入区域的高度规格。这里的「输入框」并非普通文本框而是 Cron Expression 组件的输入组合体由一排按时间粒度minute / hour / day / month / weekspring类型下再加 second排列的输入格、一行标签组以及右侧的执行时间预览区构成。三种尺寸描述的是该组合体在页面中的视觉高度规格分别对应 40px、32px、24px 三个档级与 ng-zorro-antd 中其他输入类组件如nz-input的大/中/小尺寸体系保持一致的命名约定。官方示例同时渲染三种尺寸与该文档配套的演示组件 size.ts 一次性渲染了三种尺寸可直接复制使用import { Component } from angular/core; import { NzCronExpressionModule } from ng-zorro-antd/cron-expression; Component({ selector: nz-demo-cron-expression-size, imports: [NzCronExpressionModule], template: div classexample-cron-expression nz-cron-expression nzSizesmall / nz-cron-expression nzSizedefault / nz-cron-expression nzSizelarge / /div , styles: .example-cron-expression nz-cron-expression { margin: 0 8px 8px 0; } }) export class NzDemoCronExpressionSizeComponent {}可以看到使用方式就是在nz-cron-expression元素上直接写静态属性nzSizesmall | default | large无需额外配置。组件通过NzCronExpressionModule提供该模块在 cron-expression.module.ts 中仅导出NzCronExpressionComponent内部的输入格、标签、预览子组件均不对外暴露。源码实现nzSize 如何映射为 CSS 类参数声明与默认值在 cron-expression.component.ts 中nzSize声明为一个带默认值的Input()Input() nzSize: NzCronExpressionSize default;其取值类型定义在 typings.tsexport type NzCronExpressionSize large | default | small;这是一个封闭的三值联合类型传入其他值会被 TypeScript 拒绝。默认值为default即文档中 32px 的中间档。模板中的双向类绑定尺寸的实现完全落在组件模板上。整个组件外壳分为「输入区」和「标签区」两块nzSize对二者分别施加不同类名见 cron-expression.component.tsdiv classant-input ant-cron-expression-input-group [class]statusClasses() [class.ant-input-lg]nzSize large [class.ant-input-sm]nzSize small [class.ant-input-borderless]nzBorderless [class.ant-input-focused]focus [class.ant-input-disabled]nzDisabled for (label of labels; track label) { nz-cron-expression-input ... / } /div div classant-cron-expression-label-group [class.ant-input-lg]nzSize large [class.ant-cron-expression-label-group-default]nzSize default [class.ant-input-sm]nzSize small for (label of labels; track label) { nz-cron-expression-label [type]label [labelFocus]labelFocus [locale]locale / } /div从源码结构看映射规则是nzSize 取值输入区附加类.ant-cron-expression-input-group标签区附加类.ant-cron-expression-label-group文档声明高度largeant-input-lgant-input-lg40pxdefault无额外尺寸类仅基础ant-inputant-cron-expression-label-group-default32pxsmallant-input-smant-input-sm24px几个值得注意的细节default 档对输入区是零类名实现——不加任何尺寸类直接继承ant-input基础高度32px而large/small才分别叠加ant-input-lg/ant-input-sm。这与 Ant Design 体系内ant-input-lg/ant-input-sm的通用高度令牌共用同一套约定因此 Cron 表达式输入区的高度天然与同尺寸的普通输入框对齐。标签区单独区分 default 档。由于标签组minute / hour / day / month / week 文字行没有输入框可挂靠源码为 default 档专门定义了ant-cron-expression-label-group-default类样式上通过padding: 0 padding-sm见 style/index.less控制其内边距使标签行在三种尺寸下都能与输入区保持视觉对齐。输入区内部的input元素本身不关心尺寸。在 style/index.less 中输入格内部input被设置为width: 100%; border: none; box-shadow: none等裸样式尺寸完全由外层.ant-input/.ant-input-lg/.ant-input-sm类的高度令牌决定。这意味着只要外层类名正确各时间粒度输入格每个占width: 20%会自动随尺寸缩放。测试验证尺寸类名被断言固化组件的单元测试 cron-expression.spec.ts 中存在专门的用例should nzSize work直接验证了上表的类名映射it(should nzSize work, () { testComponent.nzSize.set(small); fixture.detectChanges(); expect(resultEl.nativeElement.querySelector(.ant-cron-expression-input-group).classList).toContain( ant-input-sm ); testComponent.nzSize.set(large); fixture.detectChanges(); expect(resultEl.nativeElement.querySelector(.ant-cron-expression-input-group).classList).toContain( ant-input-lg ); });该测试断言设为small时输入组类名包含ant-input-sm设为large时包含ant-input-lg。这说明尺寸切换是响应式的——在运行时动态修改nzSize例如用[nzSize]currentSize绑定组件状态同样会即时更新 DOM 类名而非仅在首次渲染时生效。尺寸与其余能力的组合边界nzSize只影响输入区与标签区的高度/内边距不影响组件的功能性结构。从模板与源码可以确认预览区不受 nzSize 直接控制。执行时间预览nz-cron-expression-preview的布局由-preview系列样式padding: padding-sm、列表区height: 132px等见 style/index.less固定且可通过nzCollapseDisable整体隐藏nzBorderless、nzDisabled、nzStatus与nzSize正交。它们在模板中是并列的类名绑定ant-input-borderless、ant-input-disabled、statusClasses()可以任意组合例如「无边框的大号输入框」值校验逻辑与尺寸无关。组件内部用FormBuilder建立 second/minute/hour/day/month/week 六个受控字段并通过CronExpressionParser.parse来自cron-parser依赖做 cron 表达式合法性校验尺寸切换不会重置或干扰表单状态。另外需要提醒nz-cron-expression属于实验性experimental组件组件文档 index.zh-CN.md 标注其依赖第三方包使用前需先安装npm install cron-parser^5.5.0小结围绕「三种大小」这一特性ng-zorro-antd 的 Cron Expression 组件给出的完整链路是NzCronExpressionSize三值联合类型约束取值 →nzSize输入属性默认default→ 模板按档位切换ant-input-lg/ant-input-sm/ant-cron-expression-label-group-default类名 → 高度呈现为 40px / 32px / 24px → 单元测试对small与large档的类名进行断言固化。若你需要在调度表单中让 Cron 表达式输入区与页面其他输入控件保持同尺寸只需在同一组控件上保持一致的nzSize取值即可。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Cron Expression 组件 nzCollapseDisable 折叠面板隐藏指南ng zorro antd Cron Expression 组件 nzCollapseDisable 折叠面板隐藏指南 在 ng zorro antd 的 nzUI组件前端ng-zorro-antd Cron Expression 结合 Angular 响应式表单formControlName、自定义校验器与执行时间预览ng zorro antd Cron Expression 结合 Angular 响应式表单formControlName、自定义校验器与执行时间预览 ngUI组件前端如何高效管理macOS应用更新5个提升效率的实用技巧如何高效管理macOS应用更新5个提升效率的实用技巧 在macOS生态中保持应用程序处于最新状态对于系统安全性和性能优化至关重要。Latest作为一款专业的桌面应用上一篇【亲测免费】 XOutput 开源项目指南及常见问题解答下一篇Protocol Buffers 开源项目指南及问题解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考