Skip to content

Commit 6a430e8

Browse files
bplok20010bplok20010
committed
Modified examples/demo.html
Modified examples/demos/demo1.js Modified examples/demos/demo2.js Modified examples/index.html
1 parent 7874e02 commit 6a430e8

File tree

4 files changed

+171
-177
lines changed

4 files changed

+171
-177
lines changed

‎examples/demo.html‎

Lines changed: 104 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,69 @@
11
<!DOCTYPE html>
22
<html style="width:100%; height:100%; overflow:auto;">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<title>Checkbox</title>
7-
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
8-
<style type="text/css">
9-
.demo {
10-
width: 900px;
11-
height: 500px;
12-
margin: 50px auto;
13-
background: #FFF;
14-
font-size: 12px;
15-
overflow: auto;
16-
}
17-
18-
.rw-layout {
19-
display: flex;
20-
flex-direction: column;
21-
22-
flex: auto;
23-
}
24-
25-
.rw-layout.rw-layout-has-sider {
26-
flex-direction: row;
27-
28-
29-
30-
text-align: center;
31-
background: #3ba0e9;
32-
}
33-
34-
.rw-layout-sider {
35-
flex: 0 0 auto;
36-
37-
width: 200px;
38-
text-align: center;
39-
background: #3ba0e9;
40-
color: #fff;
41-
}
42-
43-
.rw-layout-footer,
44-
.rw-layout-header {
45-
flex: 0 0 auto;
46-
47-
background: #7dbcea;
48-
color: #fff;
49-
height: 64px;
50-
line-height: 64px;
51-
text-align: center;
52-
}
53-
54-
.rw-layout-content {
55-
flex: 1;
56-
57-
background: rgba(16, 142, 233, 1);
58-
color: #fff;
59-
text-align: center;
60-
}
61-
</style>
62-
</head>
63-
64-
<body style="background:#F5F5F5">
65-
<div class="demo">
66-
<div class="rw-layout" style="height: 100%;">
67-
<div class="rw-layout-header">
68-
header
69-
</div>
70-
<div class="rw-layout-content">
71-
content
72-
</div>
73-
<div class="rw-layout-footer">
74-
footer
75-
</div>
76-
</div>
77-
</div>
78-
<br />
79-
<div class="demo">
80-
<div class="rw-layout rw-layout-has-sider" style="height: 100%;">
81-
<div class="rw-layout-sider">
82-
sider
83-
</div>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Form</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"
9+
/>
10+
<style type="text/css">
11+
.demo {
12+
width: 900px;
13+
height: 500px;
14+
margin: 50px auto;
15+
background: #fff;
16+
font-size: 12px;
17+
overflow: auto;
18+
}
19+
20+
.rw-layout {
21+
display: flex;
22+
flex-direction: column;
23+
24+
flex: auto;
25+
}
26+
27+
.rw-layout.rw-layout-has-sider {
28+
flex-direction: row;
29+
30+
text-align: center;
31+
background: #3ba0e9;
32+
}
33+
34+
.rw-layout-sider {
35+
flex: 0 0 auto;
36+
37+
width: 200px;
38+
text-align: center;
39+
background: #3ba0e9;
40+
color: #fff;
41+
}
42+
43+
.rw-layout-footer,
44+
.rw-layout-header {
45+
flex: 0 0 auto;
46+
47+
background: #7dbcea;
48+
color: #fff;
49+
height: 64px;
50+
line-height: 64px;
51+
text-align: center;
52+
}
53+
54+
.rw-layout-content {
55+
flex: 1;
56+
57+
background: rgba(16, 142, 233, 1);
58+
color: #fff;
59+
text-align: center;
60+
}
61+
</style>
62+
</head>
63+
64+
<body style="background:#F5F5F5">
65+
<div class="demo">
8466
<div class="rw-layout" style="height: 100%;">
85-
<div class="rw-layout-header">
86-
header
87-
</div>
8867
<div class="rw-layout-header">
8968
header
9069
</div>
@@ -96,30 +75,50 @@
9675
</div>
9776
</div>
9877
</div>
99-
</div>
100-
<br />
101-
<div class="demo">
102-
<div class="rw-layout rw-layout-has-sider" style="height: 100%;">
103-
<div class="rw-layout-sider">
104-
sider
105-
</div>
106-
<div class="rw-layout" style="height: 100%;">
107-
<div class="rw-layout-header">
108-
header
109-
</div>
110-
<div class="rw-layout-content">
111-
content
78+
<br />
79+
<div class="demo">
80+
<div class="rw-layout rw-layout-has-sider" style="height: 100%;">
81+
<div class="rw-layout-sider">
82+
sider
11283
</div>
113-
<div class="rw-layout-footer">
114-
footer
84+
<div class="rw-layout" style="height: 100%;">
85+
<div class="rw-layout-header">
86+
header
87+
</div>
88+
<div class="rw-layout-header">
89+
header
90+
</div>
91+
<div class="rw-layout-content">
92+
content
93+
</div>
94+
<div class="rw-layout-footer">
95+
footer
96+
</div>
11597
</div>
11698
</div>
99+
</div>
100+
<br />
101+
<div class="demo">
102+
<div class="rw-layout rw-layout-has-sider" style="height: 100%;">
103+
<div class="rw-layout-sider">
104+
sider
105+
</div>
106+
<div class="rw-layout" style="height: 100%;">
107+
<div class="rw-layout-header">
108+
header
109+
</div>
110+
<div class="rw-layout-content">
111+
content
112+
</div>
113+
<div class="rw-layout-footer">
114+
footer
115+
</div>
116+
</div>
117117

118-
<div class="rw-layout-sider">
119-
sider
118+
<div class="rw-layout-sider">
119+
sider
120+
</div>
120121
</div>
121122
</div>
122-
</div>
123-
</body>
124-
125-
</html>
123+
</body>
124+
</html>

‎examples/demos/demo1.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from "react";
22

3-
import { Form, FormItem, NativeInput, FormContext } from "../../lib/index";
3+
import { Form, FormItem, NativeField, FormContext } from "../../lib/index";
44

55
function FormItemField({
66
type = "text",
@@ -15,7 +15,7 @@ function FormItemField({
1515
marginBottom: 24,
1616
}}
1717
>
18-
<NativeInput
18+
<NativeField
1919
component={component}
2020
type={type}
2121
children={children}

‎examples/demos/demo2.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { Component } from "react";
22

3-
import { Form, FormItem, NativeInput } from "../../lib/index";
3+
import { Form, FormItem, NativeField } from "../../lib/index";
44

55
function Input(props) {
66
return (
7-
<NativeInput
7+
<NativeField
88
{...props}
99
className=""
1010
type="text"
@@ -152,25 +152,25 @@ export default class DEMO extends Component {
152152
<Input />
153153
</FormItem>
154154
<FormItem name="name9" label="姓名">
155-
<NativeInput component="input" />
155+
<NativeField component="input" />
156156
</FormItem>
157157
<div>
158158
{form.isFieldValidating("name9")
159159
? "数据校验中..."
160160
: null}
161161
</div>
162162
<FormItem name="info.gender" label="性别">
163-
<NativeInput component="input" />
163+
<NativeField component="input" />
164164
</FormItem>
165165
<FormItem
166166
name="info.age"
167167
label="年龄"
168168
normalize={v => parseInt(v) || ""}
169169
>
170-
<NativeInput component="input" />
170+
<NativeField component="input" />
171171
</FormItem>
172172
<FormItem name="info.address" label="地址">
173-
<NativeInput component="input" />
173+
<NativeField component="input" />
174174
</FormItem>
175175
<FormItem
176176
name="info.list[0]"
@@ -191,7 +191,7 @@ export default class DEMO extends Component {
191191
);
192192
}}
193193
>
194-
<NativeInput component="input" />
194+
<NativeField component="input" />
195195
</FormItem>
196196
<div>
197197
{form.isFieldValidating("info.list[0]")
@@ -217,28 +217,28 @@ export default class DEMO extends Component {
217217
);
218218
}}
219219
>
220-
<NativeInput component="input" />
220+
<NativeField component="input" />
221221
</FormItem>
222222
<div>
223223
{form.isFieldValidating("info.list[1]")
224224
? "数据校验中..."
225225
: null}
226226
</div>
227227
<FormItem name="info.country" label="国籍">
228-
<NativeInput component="select">
228+
<NativeField component="select">
229229
<option value="中国">中国</option>
230230
<option value="美国">美国</option>
231231
<option value="澳大利亚">
232232
澳大利亚
233233
</option>
234-
</NativeInput>
234+
</NativeField>
235235
</FormItem>
236236
<FormItem
237237
name="info.desc"
238238
label="备注"
239239
alignItems="top"
240240
>
241-
<NativeInput component="textarea" />
241+
<NativeField component="textarea" />
242242
</FormItem>
243243
{form.isValidating() ? "表单校验中..." : null}
244244
<pre>{JSON.stringify(formValue)}</pre>

0 commit comments

Comments
 (0)