J9国际集团|Home

135-2716-3909
网站建设资讯详细

前后端分□□离开发之React框架antd的使用

发表日期:2026-07-19 10:24:28   作者来源:J9国际集团   浏览:3808   标签:前后端分离开发    
antd 是基于 Ant Design 设计体系□□□的 React UI 组件库,主要用于□□□研发企业□□□级中后台□□产品。Antd有如下特□□□性:1.提炼自企□□业级中后丨台产品的◉交互语言□□□□和视觉风□□□格。2.开箱即用□□的高质量 React 组件。3. 使用 TypeScript 开发,提供完整◎的类型定□□□□义文件。4.全链路开□□发和设计□□□工具体系。5.数十个国□□□□际化语言♦支持。6.深入每个□□□细节的主□□题定制能□□□□力。
Antd中有几个常用的组件,Button按钮应该是使用最多的组件了。
1.Button按钮如下图:

react


 在 Antd中提供了◣五种按钮。从上图种□□可以得知□□□□类型有:主按钮、次按钮、虚线按钮、文本按钮□□□□和链接按◣钮。主按钮在□□同一个操□□□□作区域最□□多出现一□□□□次。
主按钮:用于主行□□□□动点,一个操作•区域只能□□□有一个主□□□按钮。默认按钮:用于没有□□□主次之分□□□□的一组行□□动点。虚线按钮:常用于添·加操作。文本按钮:用于最次◣级的行动□□点。链接按钮:一般用于□□□链接,即导航至◥某位置。
2.Form表单是高✦性能表单□□控件,自带数据◢域管理。包含数据□□□□录入、校验以及□□□□对应样式。
如图:
 

antd


Form表单基本※的表单数□□□据域控制□□□展示,包含布局、初始化、验证、提交。Form表单提供□□□了许多API。
colon:配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效)。
1.Componen:设置 Form 渲染元素,为 false 则不创建 DOM 节点。
2.Fields:通过状态管理(如 redux)控制表单字段,如非强需求不推荐使用。
3.Form:经 Form.useForm() 创建的 form 控制实例,不提供时会自动创建。
4.initialValues:表单默认值,只有初始化以及重置时生效。
5.labelAlign:label 标签的文本对齐方式。
6.labelCol:label 标签布局,同 <Col> 组件,设置 span offset 值,如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。
7.Layout:表单布局。
8.Name:表单名称,会作为表单字段 id 前缀使用。
9.Preserve:当字段被删除时保留字段值。
等等还有许多关于Form表单API在这就不多展示了,可有antd官网查看。
如没特殊注明,文章均为J9国际集团原创,转载请注明来自https://www.nzweibaum.com/news/6297.html