Formily:阿里开源 可视化动态表单解决方案

科技   2024-12-16 18:51   湖北  


文章底部获取项目地址



Formily 是一个由阿里开源的动态表单解决方案,主要用于构建和管理复杂的表单界面。支持多种前端框架,包括但不限于 React 和 Vue,支持图形可视化界面设计表单,支持多种 UI 组件集成,Formily 的核心优势在于其灵活性和扩展性,允许开发者以声明式的方式定义表单结构和行为。
安装使用:
// 内核安装
npm install --save @formily/core
// react
npm install --save @formily/react
// vue
npm install --save @formily/vue
// 组件库安装
npm install --save antd moment @formily/antd
案例场景
Formily 提供了设计可扩展性,允许开发者通过图形界面设计表单,并生成相应的代码。通过可视化编辑器,非技术用户也可以设计表单,提高开发效率。
Formily 表单设计器安装使用:以 Ant Design 为例。
npm install --save @designable/formily-antd
import 'antd/dist/antd.less'
import React, { useMemo } from 'react'
import ReactDOM from 'react-dom'
import {
  Designer, //设计器根组件,主要用于下发上下文
  DesignerToolsWidget, //画板工具挂件
  ViewToolsWidget, //视图切换工具挂件
  Workspace, //工作区组件,核心组件,用于管理工作区内的拖拽行为,树节点数据等等...
  OutlineTreeWidget, //大纲树组件,它会自动识别当前工作区,展示出工作区内树节点
  ResourceWidget, //拖拽源挂件
  HistoryWidget, //历史记录挂件
  StudioPanel, //主布局面板
  CompositePanel, //左侧组合布局面板
  WorkspacePanel, //工作区布局面板
  ToolbarPanel, //工具栏布局面板
  ViewportPanel, //视口布局面板
  ViewPanel, //视图布局面板
  SettingsPanel, //右侧配置表单布局面板
  ComponentTreeWidget, //组件树渲染器
from '@designable/react'
Formily 支持多种 UI 组件生态:
包含 @formily/antd、@formily/antd-v5、@formily/antd-mobile、@formily/next、@formily/element、@formily/element-plus、@formily/antdv、@formily/vant 、@formily/semi、@formily/tdesign-react、aliyun teamix、antd-formily-boost。
相关文档:
这些组件库和框架的集成,使得 Formily 能够适应不同的开发场景和需求,无论是 Web 应用还是移动应用,都能提供强大的表单构建能力。
功能和特性:
动态表单:可以根据后端数据动态生成表单,无需硬编码。
表单验证:内置强大的表单验证功能,支持同步和异步验证。
响应式布局:支持响应式布局,适应不同设备和屏幕尺寸。
国际化:支持多语言,可以轻松实现表单的国际化。
主题定制:允许自定义主题,以适应不同的设计需求。
组件生态:拥有丰富的组件库,可以快速构建各种类型的表单。

《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!

其他推荐


DPlayer:开源 H5 弹幕视频播放器

kkFileView:支持数十种文件格式预览开源工具库

Arco Design Mobile:字节新开源移动端 UI 组件库

勾股 OA:开源 企业办公管理系统

Fabricjs:交互式 canvas 图形绘制库

likeadmin:多语言 多终端 多应用 系统框架

Ant Design X:蚂蚁 AI 组件 打造人工智能对话应用

Excalidraw:支持多人协作 AI 辅助 可视化图形绘制

项目地址


GitHub:https://github.com/alibaba/formily

官方文档:https://formilyjs.org/zh-CN

前端资源推荐
推荐分享各种前端组件UI、插件工具、中后台系统、低代码、可视化、开源项目、学习资源、特效源码等
 最新文章