x-render
约 1 分钟阅读
alibaba/x-render
- schema 基于 json-schema
- fr-generatorGitHub 文件alibaba/x-render/tools/schema-generator - 表单设计器
{
// 布局样式控制
"displayType": "row",
"labelWidth": 60,
"type": "object",
"properties": {
// 数据字段定义
"input": {
"title": "简单输入框",
// 组件数据类型定义
"type": "string",
"min": 6,
"rules": [
{
"pattern": "^[A-Za-z0-9]+$",
"message": "只允许填写英文字母和数字"
}
]
},
"select": {
"title": "单选",
"type": "string",
"enum": ["a", "b", "c"],
"enumNames": ["选项1", "选项2", "选项3"],
// 控制使用的组件
"widget": "radio"
},
//
"showSetting": {
"title": "是否展示网址",
"type": "boolean"
},
"siteUrl": {
"title": "网址",
"type": "string",
"placeholder": "此处必填",
// 联动控制
"hidden": "{{formData.showSetting !== true}}",
"required": true,
"props": {
"addonBefore": "https://",
"addonAfter": ".com"
}
}
}
}关联信息
反向链接、本文链接的其他页面和外部资料。
反向链接
- Low Code Design笔记 · x-render
Low Code - 讲究 编辑,关联,任意 组件 · 组件的特性 · 配置化 · Schema化 · 可以参考设计,只实现配置化 · 模型 · ProseMirror 的 Schema 模型值得借鉴参考 · HTML/JSX - type/tag, attributes, children
参考资料
GitHub1 条
- alibaba/x-render/tools/schema-generatorgithub.com/alibaba/x-render/tree/master/tools/schema-generator
其他外链1 条
- xrender.fun/generator/playgroundxrender.fun/generator/playground