1
1
# Form PC
2
2
3
- A modern UI Framework built with React and TypeScript, providing powerful form components and tools for building complex web applications.
3
+ 基于PC的Form表单渲染引擎
4
4
5
- ## Features
6
-
7
- - 🚀 Built with React 18 and TypeScript
8
- - 📦 Modular and tree-shakeable
9
- - 🎨 Beautiful and customizable UI components
10
- - 📝 Rich form components and validation
11
- - 🔧 Easy to use and extend
12
- - 🎯 High performance and optimized bundle size
13
-
14
- ## Installation
15
-
16
- ``` bash
17
- # Using npm
5
+ ## 安装
6
+ ```
18
7
npm install @codingapi/form-pc
19
-
20
- # Using yarn
8
+ # 或者使用yarn
21
9
yarn add @codingapi/form-pc
22
-
23
- # Using pnpm
24
- pnpm add @codingapi/form-pc
25
10
```
26
11
27
- ## Quick Start
28
-
29
- ``` tsx
30
- import { Form } from ' @codingapi/form-pc' ;
12
+ ## 使用
31
13
32
- function App() {
33
- return (
34
- <Form >
35
- { /* Your form components here */ }
36
- </Form >
37
- );
14
+ #### Form表单的渲染
15
+ ```
16
+ import React from "react";
17
+ import {Form} from "@codingapi/form-pc";
18
+ import {FormField} from "@codingapi/ui-framework";
19
+
20
+ const Test = () => {
21
+
22
+ const fields = [
23
+ {
24
+ type: 'input',
25
+ props: {
26
+ required: true,
27
+ name: ['user', 'name'],
28
+ label: '姓名',
29
+ placeholder: '请输入姓名',
30
+ validateFunction: async (content) => {
31
+ const value = content.value;
32
+ if (value) {
33
+ return []
34
+ }
35
+ return ['姓名不能为空']
36
+ }
37
+ }
38
+ }] as FormField[]
39
+
40
+ return (
41
+ <>
42
+ <Form
43
+ layout={"vertical"}
44
+ onFinish={async (values) => {
45
+ console.log(values);
46
+ }}
47
+ loadFields={async () => {
48
+ return fields;
49
+ }}
50
+ >
51
+ </Form>
52
+ </>
53
+ )
38
54
}
55
+
56
+ export default Test;
39
57
```
58
+ 更多示例请查看:https://github.com/codingapi/form-pc/tree/main/playground
59
+
40
60
41
- ## Development
61
+ ## 主要特征
62
+
63
+ - 支持对常用的Form表单的组件渲染
64
+ - 即支持Meta数据渲染,也支持组件的渲染
65
+ - 支持对form表单的控制能力
66
+ - 支持表单字段的onChange、validate能力
67
+
68
+ ## 开发
42
69
43
70
``` bash
44
71
# Install dependencies
@@ -53,32 +80,8 @@ yarn build
53
80
# Run tests
54
81
yarn test
55
82
```
83
+ ## 许可
56
84
57
- ## Project Structure
58
-
59
- ```
60
- form-pc/
61
- ├── src/ # Source code
62
- ├── dist/ # Build output
63
- │ ├── cjs/ # CommonJS build
64
- │ └── esm/ # ES Modules build
65
- ├── rollup.config.js # Rollup configuration
66
- └── package.json # Project metadata
67
- ```
68
-
69
- ## Browser Support
70
-
71
- - Chrome >= 60
72
- - Firefox >= 60
73
- - Safari >= 12
74
- - Edge >= 79
75
-
76
- ## Contributing
77
-
78
- We welcome contributions! Please see our [ Contributing Guide] ( CONTRIBUTING.md ) for details.
79
-
80
- ## License
81
-
82
- Apache-2.0 © [ CodingAPI] ( https://github.com/codingapi )
85
+ Apache-2.0 © [ CodingAPI] ( https://github.com/codingapi/form-pc/blob/main/LICENSE )
83
86
84
87
0 commit comments