5.0.1 • Published 12 months ago
@markmo/antd-schema-form v5.0.1
antd-schema-form
Antd-schema-form based Ant Design, quickly generate interactive forms with JSON Schema configuration.
This Demo simply shows how to construct a form by configuring schema.json.
Start using
- React version
>=16.7.0
. Use of components: s
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import SchemaForm, { getKeysFromObject, // Get all the keys under schema.json getObjectFromValue, // Object formatted into the value required by the form getValueFromObject // The value of the form obtained from the form, formatted into an object } from 'antd-schema-form'; import 'antd-schema-form/style/antd-schema-form.css'; // Introducing style // json schema const json = { id: '$root', type: 'object', title: '$root', properties: {} }; ReactDOM.render( <SchemaForm json={ json } />, document.getElementById('app') );
API
Parameter | Description | Type |
---|---|---|
json | Json schema, required. | object |
value | Form value. | object |
onOk | Form confirmation event. | (form: object, value: object, keys: Array<string>) => void |
onCancel | Form cancellation event. | (form: object, keys: Array<string>) => void |
okText | Confirm button text. | string |
cancelText | Cancel button text. | string |
footer | Custom bottom content, onOk event reference | (form: object) => React.Node |
customComponent | Custom rendering component, reference | object |
customTableRender | Custom table column rendering component, reference | object |
languagePack | Language configuration, reference | object |
formOptions | Options of Form , reference | object |
Json schema configuration
Custom rendering component
Load components as needed
Development and testing
- Run the command
npm run dev
, enterhttp://127.0.0.1:5050
in the browser to view the demo and develop. - Run the command
npm run build
andnpm run test
, and runhttp://127.0.0.1:6060
in the browser to run the test case.
5.0.1
12 months ago