提交 24200e19 编写于 作者: F FateRiddle

文档移动

上级 4afb88c5
......@@ -18,15 +18,17 @@ export default defineConfig({
navs: [
{
title: 'form-render',
path: '/form-render',
children: [
{ title: '教程', path: '/guide' },
{ title: '配置', path: '/config' },
{ title: '教程', path: '/form-render/guide' },
{ title: '配置', path: '/form-render/config' },
],
},
{ title: 'Playground', path: '/playground' },
{ title: '自定义组件', path: '/widgets' },
{
title: 'table-render',
path: '/table-render',
children: [
{ title: '教程', path: '/table-render/guide' },
{ title: '配置', path: '/table-render/config' },
......
{
"schema": {
"type": "object",
"properties": {
"objectName": {
"title": "对象",
"description": "这是个对象类型",
"type": "object",
"ui:options": {
"collapsed": true
},
"properties": {
"inputName": {
"title": "简单输入框",
"type": "string",
"ui:options": {
"noTrim": false
}
}
}
},
"inputName": {
"title": "url输入框",
"type": "string",
"format": "url"
},
"imageName": {
"title": "图片展示",
"type": "string",
"format": "image"
},
"inputName2": {
"title": "email输入框",
"type": "string",
"format": "email"
},
"string": {
"title": "字符串",
"type": "string",
"pattern": "^[A-Za-z0-9]+$",
"message": {
"pattern": "请输入正确格式"
}
},
"string22": {
"title": "测试效验",
"type": "string",
"ui:hidden": "{{formData.string!=='2'}}"
},
"color": {
"title": "颜色选择",
"type": "string",
"format": "color"
}
},
"required": ["string22"]
},
"formData": {
"string": "2"
}
}
## 0.8.9
长列表会自动分页, 可通过 `ui:options/pageSize` 来控制每页展示数量
```jsx
import React from 'react';
import FR from '../demo/FR/index.jsx';
import json from '../demo/new-feature/pagination.json';
export default () => <FR schema={json} />;
```
\ No newline at end of file
---
order: 1
title: test2
nav:
order: 1
title: 教程
---
```jsx
import React, { useState, useEffect } from 'react';
import { Select } from 'antd';
import FR from 'form-render/lib/antd';
// import FR from 'form-render/lib/fusion';
// import '@alifd/next/dist/next.min.css';
export default () => {
const [data, setData] = useState();
const submit = () => {
alert(JSON.stringify(data, null, 2));
};
// useEffect(() => {
// setTimeout(() => {
// setData({ date1: 1612195207000 });
// }, 500);
// }, []);
const _onChange = data => {
setData(data);
};
useEffect(() => {
setData({ string: 'b' });
// setTimeout(() => setData({ string: 'b' }), 0);
}, []);
return (
<div>
<FR
formData={data}
onChange={_onChange}
widgets={{ MySelect }}
schema={{
type: 'object',
properties: {
string: {
title: '字符串',
'ui:widget': 'MySelect',
},
select: {
title: '单选',
type: 'string',
enum: ['a1', 'b1', 'c1'],
},
},
}}
/>
<button onClick={submit}>haha</button>
</div>
);
};
const LIST = ['a', 'b', 'c'];
const MySelect = props => {
const { style = {}, name, value = '', onChange, isEditing } = props;
useEffect(() => {
if (!value) {
setTimeout(() => {
onChange(name, LIST[0]);
}, 0);
}
}, []);
const handleChange = value => {
// 为了兼容 FormRender,所以需要有下面的 name 判断,一般的组件封装直接通过回调函数把value带回去就行了,这里的onChange(name, value)主要是为了保证FR知道自定义组件的key
onChange(name, value);
};
return (
<Select
value={value || LIST[0]}
style={{ ...style, width: '100%' }}
onChange={handleChange}
>
{LIST.map((d, index) => (
<Select.Option value={d} key={index}>
<span>{`${d}`}</span>
</Select.Option>
))}
</Select>
);
};
```
---
order: 1
title: test
nav:
order: 1
title: 教程
---
```jsx
import React, { useState, useEffect } from 'react';
import { Select } from 'antd';
import FR from 'form-render/lib/antd';
// import FR from 'form-render/lib/fusion';
// import '@alifd/next/dist/next.min.css';
export default () => {
const [data, setData] = useState();
const [valid, onValid] = useState([]);
const submit = () => {
if (valid.length > 0) {
console.log(valid);
return;
}
console.log(data);
alert(JSON.stringify(data, null, 2));
};
// useEffect(() => {
// setTimeout(() => {
// setData({ date1: 1612195207000 });
// }, 500);
// }, []);
const _onChange = data => {
setData(data);
};
useEffect(() => {
setData({ string: 'b' });
}, []);
return (
<div>
<FR
formData={data}
onValidate={onValid}
onChange={_onChange}
widgets={{ MySelect }}
schema={{
type: 'object',
properties: {
pwd: {
title: '密码',
type: 'string',
validator: "{{value.length > 6 ? '长度超了': ''}}",
},
pwd2: {
title: '重复输入密码',
type: 'string',
validator: "{{formData.pwd == value ? '': '两个密码不一致'}}",
},
},
}}
/>
<button onClick={submit}>haha</button>
</div>
);
};
const LIST = ['a', 'b', 'c'];
const MySelect = props => {
const { style = {}, name, value = '', onChange, isEditing } = props;
useEffect(() => {
if (!value) {
setTimeout(() => {
onChange(name, LIST[0]);
}, 0);
}
}, []);
const handleChange = value => {
// 为了兼容 FormRender,所以需要有下面的 name 判断,一般的组件封装直接通过回调函数把value带回去就行了,这里的onChange(name, value)主要是为了保证FR知道自定义组件的key
onChange(name, value);
};
return (
<Select
value={value || LIST[0]}
style={{ ...style, width: '100%' }}
onChange={handleChange}
>
{LIST.map((d, index) => (
<Select.Option value={d} key={index}>
<span>{`${d}`}</span>
</Select.Option>
))}
</Select>
);
};
```
---
order: 3
title: 使用案例
nav:
order: 2
title: 指南
toc: menu
---
......
---
order: 2
title: 快速上手
nav:
order: 1
title: 指南
toc: menu
---
......
---
order: 1
title: 介绍
nav:
order: 1
title: 指南
toc: menu
---
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册