oe注册登录网_前后端分离开发之React框架antd的使用

www.pptschool.com 沐鸣平台注册 2021-12-13 447 次浏览 没有评论

antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。Antd有如下特性:1.提炼自企业级中后台产品的交互语言和视觉风格。2.开箱即用的高质量 React 组件。3. 使用 TypeScript 开发,提供完整的类型定义文件。4.全链路开发和设计工具体系。5.数十个国际化语言支持。6.深入每个细节的主题定制能力。

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

1.Button按钮如下图:

react

 在 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> 组件,设置 span offset 值,如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。

7.Layout:表单布局。

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

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

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

回顶部