FormRender 一站式中后台表单解决方案 官网 https://xrender.fun/form-render FormRender 是中后台开箱即用的表单解决方案,通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求,2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持,同时保持开发者能快速上手,并以...
极简的组件 api:FormRender 使用上类似一个单独的可控的 input: // 可控的input <input value={value} onChange={onChange} /> // form-render, 只多了schema,用于描述 Form 长什么样 <FormRender formData={value} onChange={onChange} schema={schema} /> 这样的设计下,FR 只负责管理和改动表单数据/时时...
FormRender的功能基本能满足90%的表单,如果有特别需求的还是手动实现,也可以通过阿里的另一款formilyjs实现,不过formilyjs学习成本比较高。 项目官网:https://x-render.gitee.io/form-render Github项目地址:https://github.com/alibaba/x-render
import Reactfrom'react';import{Button}from'antd';import FormRender,{useForm}from'form-render';const schema={type:'object',properties:{input1:{title:'简单输入框',type:'string',required:true,},select1:{title:'单选',type:'string',enum:['a','b','c'],enumNames:['早','中','晚'],}...
FormRender 通过JSON Schema 生成标准 Form,常用于自定义搭建配置界面生成 了解 文档官网 schema 编辑器 Playground/Code Sandbox 常见场景 Proptypes to Json Schema 更新日志 后期规划 效果 优势 如上图,使用Schema 编辑器快速生成可实现低上手成本、快速搭建 ...
將伺服器控制項內容傳送到提供的 HtmlTextWriter 物件,以寫入要在用戶端上呈現的內容。 這個 API 已經過時。 如需如何開發 ASP.NET 行動應用程式的資訊,請參閱 具有ASP.NET 的Mobile Apps & Sites。 C# 複製 protected override void Render (System.Web.UI.HtmlTextWriter writer); 參數 writer HtmlTextWriter ...
FormRender 是一个通过 JSON Schema 生成标准 Form 的渲染引擎,常用于自定义搭建配置界面生成 0 比如你有想通过一定标准约束自动生成表单配置界面,类似于搭建配置表单界面这种场景,就可以考虑 FormRender,比如这些 在内部实践一年后,也有十多个BU在使用,为了让外部也可以用上,我们于今年10月份对它进行的开源到 alibaba...
FormRender和fr-generator两套工具配合起来,基本满足了项目的初始需求,因需要扩展,或许还会对源码进行改造,在此先深入研究了下FormRender@1.5.8的源码,后面再研究fr-generator。 1 使用举例 1.1 schema {"type":"object","properties":{"input_xnNHW9":{"title":"输入框","type":"string","props":{}},"...
form-render的实现原理可以分为三个主要步骤:解析JSON Schema、渲染表单组件、收集表单数据。下面将详细介绍这三个步骤。 form-render需要解析JSON Schema。JSON Schema是一种描述数据结构的规范,它定义了数据的类型、格式、校验规则等信息。form-render通过解析JSON Schema,可以获取到表单的结构信息,包括表单中各个字段的...
本文来自飞猪前端同学在进行FormRender2.0升级过程中,基于官方的2.0升级方案之上,做的一些差异化总结。 一些关键字处理上的差异 1. description 差异 2.0 的 description 使用了 tooltip 来替代,原有的 description 直接显示在了 label 后,不再用 icon 收拢。1.0 的 description 是在label后新增了一个 icon,鼠标 hov...