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

来源： All文章

发布时间：2023-03-24 14:10:24

　　antd是基于AntDesign设计体系的ReactUI组件库，主要用于研发企业级中后台产品。Antd有如下特性：

　　1.提炼自企业级中后台产品的交互语言和视觉风格。

　　2.开箱即用的高质量React组件。

　　3.使用TypeScript开发，提供完整的类型定义文件。

　　4.全链路开发和设计工具体系。

　　5.数十个国际化语言支持。

　　6.深入每个细节的主题定制能力。

　　Antd中有几个常用的组件，Button按钮应该是使用最多的组件了。

　　1.Button按钮如下图：

　　在Antd中提供了五种按钮。从上图种可以得知类型有：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

　　主按钮：用于主行动点，一个操作区域只能有一个主按钮。默认按钮：用于没有主次之分的一组行动点。虚线按钮：常用于添加操作。文本按钮：用于最次级的行动点。链接按钮：一般用于链接，即导航至某位置。

　　2.Form表单是高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

　　如图：

　　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组件，设置spanoffset值，如{span：3，offset：12}或sm：{span：3，offset：12}。

　　7.Layout：表单布局。

　　8.Name：表单名称，会作为表单字段id前缀使用。

　　9.Preserve：当字段被删除时保留字段值。

　　等等还有许多关于Form表单API在这就不多展示了，可有antd官网查看。

* 文章来源于网络，如有侵权，请联系客服删除处理。