(原始内容存档于2013-10-12). formik-json

由 Flipbyte 开发

formik-json是Formik方便地使用JSON /创建表格的包装器 用于定义元素的 Javascript 对象 .

实例

• 演示

先决条件

该组件依赖于几个第三方插件来添加WYSIWYG, 选择、自动完成、验证等。 很少有人已经打包过来了 和扩展名,不需要在您的 项目.

安装

您可以使用以下步骤安装 Formik-json .

$ npm i @flipbyte/formik-json

快速启动指南

安装完成后,可以将表单添加到任何 构成部分如下:

导入窗体组件

import { Form } from '@flipbyte/formik-json';

准备表单对象

{
    "id": "my-new-form",
    "label": "My New Form",
    "type": "container",
    "renderer": "form",
    "elements": {
        "save": {
            "type": "field",
            "renderer": "button",
            "name": "save",
            "label": "Save",
            "htmlClass": "btn-success",
            "buttonType": "submit"
        },
        "main": {
            "type": "container",
            "renderer": "div",
            "htmlClass": "row",
            "elements": {
                "title": {
                    "name": "attributes.0.title",
                    "label": "Title",
                    "type": "field",
                    "renderer": "text",
                    "fieldType": "text"
                },
                ....
            }
        },
        ....
    }
}

任意添加组件

<Form
    schema={ /* Your form object here */ }
    { .../* Other formik props */ } />

窗体组件

窗体组件需要以下属性:

Schema 对象

Schema 对象包含可以是2个类型之一的元素: “容器”或“场” 组件。 "集装箱"有一个"要素"键,你可以在里面 定义新容器或字段.

有下列密钥( 全部需要) 的 schema 对象 :

注意: 计划对象只能有一个容器. 你可以拥有 主对象内多个容器和字段 计划对象 .

“元素”是具有键值对的对象,其中值是另一个 对象。 值对象可以是"容器"类型,也可以是"场"类型.

每个容器或字段都需要一个可使用 "投降者":"{你的 投降者}". 您可以定义您拥有的渲染器 容器和钥匙或使用随同模块而来的钥匙.

每种容器的属性如下:

通用容器属性

集装箱特定特性

以下是每种字段的属性

常见字段属性

字段特定属性

谢谢

如有建议、意见或想法,可制定更多的 解决方案,你可以给我们写信 Flipbyte.com (英语)欢迎公关.

许可证

《麻省理工学院许可证》