@ camunda/ 形式游戏场
卡蒙达格式游戏场.
使用量
将游乐场融入您的应用程序 :
import { createCamundaFormPlayground } from 'camunda/form-playground';
const formPlayground = await createCamundaFormPlayground({
container: document.querySelector('#container'),
data,
schema
});
// open preview
formPlayground.open();
// close preview
formPlayground.collapse();
// listen on editor events
const formEditor = formPlayground.getEditor();
formEditor.on('selection.changed', () => { ... });
样式
适当的样式包括必要的样式表和使用的字体:
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/@camunda/[email protected]/dist/assets/form-js.css">
<link rel="stylesheet" href="https://unpkg.com/@camunda/[email protected]/dist/assets/form-js-editor.css">
<link rel="stylesheet" href="https://unpkg.com/@camunda/[email protected]/dist/assets/camunda-form-playground.css">
API 密码
createCamundaFormPlayground => Promise<Result, Error>
创建一个已完全渲染的窗体操场 有选项。 。 。 .
import { createFormPlayground } from '@camunda/form-playground';
const formPlayground = await createFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
CamundaFormPlayground
创建新窗体操场 有选项。 。 。 .
import { CamundaFormPlayground } from '@camunda/form-playground';
const formPlayground = new CamundaFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
选项
有几个选项可以传递给 createFormPlayground 或者说 CamundaFormPlayground数字 :
{
container: HTMLElement, // optional - the container to render the form playground into
data: {}, // required - set the initial form data
schema: {}, // required - set the initial form schema
exporter: { name: '', version: '' }, // optional - set the schema exporter name and version
layout: {}, // optional - set the initial form layout
editorAdditionalModules: [], // optional - add additional modules to the form editor
viewerAdditionalModules: [], // optional - add additional modules to the form preview
editorProperties: {}, // optional - set the initial form editor properties
viewerProperties: {}, // optional - set the initial form preview properties
}
例如,你可以使用 viewerProperties 在新标签中覆盖打开外部链接的默认行为 :
viewerProperties: {
textLinkTarget: '_blank'
}
CamundaFormPlayground#open(containers?: string[]) => void
打开所有或特定的游乐场容器.
// open all
formPlayground.open();
// open specific
formPlayground.open([ 'form-preview' ]);
CamundaFormPlayground#collapse(containers?: string[]) => void
折叠所有或特定游乐场容器.
// collapse all
formPlayground.collapse();
// collapse specific
formPlayground.collapse([ 'form-preview' ]);
CamundaFormPlayground#get(type: String, strict: Boolean) => any
从嵌入式格式编辑器获取服务 .
const eventBus = formPlayground.get('eventBus');
CamundaFormPlayground#getDataEditor() => JSONEditor
获取嵌入式输入数据编辑器 .
const dataEditor = formPlayground.getDataEditor();
const data = dataEditor.getValue();
CamundaFormPlayground#getEditor() => FormEditor
获取嵌入式格式编辑器 .
const editor = formPlayground.getEditor();
editor.on('selection.changed', () => { ... });
CamundaFormPlayground#getForm() => Form
获取嵌入式预览表 .
const form = formPlayground.getForm();
form.on('submit', event => {
console.log('Form <submit>', event);
});
CamundaFormPlayground#getResultView() => JSONEditor
获取嵌入式输出数据视图 .
const resultView = formPlayground.getResultView();
const data = resultView.getValue();
CamundaFormPlayground#getSchema() => any
获取当前表单计划 .
CamundaFormPlayground#setSchema(schema: any) => void
设置表单方案.
CamundaFormPlayground#saveSchema() => any
从嵌入的窗体编辑器导出窗体计划 .
const schema = formPlayground.saveSchema(schema);
console.log('exported schema', schema);
CamundaFormPlayground#attachTo(parent: HTMLElement) => void
将表单游乐场附加到父节点上.
CamundaFormPlayground#detach() => void
将形式游乐场从母节点分离出.
CamundaFormPlayground#fire(event) => void
开个会.
CamundaFormPlayground#on(event, fn) => void
订阅一个事件.
CamundaFormPlayground#off(event, fn) => void
从一个事件取消订阅 .
CamundaFormPlayground#destroy() => void
从文档中删除窗体操场.
黑客项目
要得到开发设置 确保有 节点JS 已安装. 设置后立即复制项目并执行
npm install
npm start
许可证
麻省理工学院