formly-lowcode

formly-lowcode是一个基于angular开发的低代码设计器，它以组件的形式发布。使用ng-zorro-antd UI库构建界面。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。

注意: 此项目还在开发阶段，请谨慎使用

文档和示例

查看 文档

查看 示例

🖥使用环境

• Angular >= v13.0.0
• ng-zorro-antd >= v13.0.0

📦安装

npm i @xmagic/formly-lowcode --save

🔨使用

🍏引入样式

有两种方式引入样式, 在 angular.json 中 或者 style.less中, 任选其一

• 在 angular.json 中引入

{
  "styles": [
    "node_modules/@xmagic/nzx-antd/nzx-antd.less",
    "@xmagic/formly-editor/formly-editor.less",
    "@xmagic/formly-editor/assets/iconfont/iconfont.css"
  ]
}

• 在 style.less 中引入 less 样式文件

@import '@xmagic/nzx-antd/nzx-antd.less';
@import '@xmagic/formly-editor/formly-editor.less';
@import '@xmagic/formly-editor/assets/iconfont/iconfont.css';

🍎引入模块

1. 修改AppModule 导入FormlyEditorModule模块

// app.module.ts

import { NgModule } from '@angular/core';
import { FormlyEditorModule } from '@xmagic/formly-editor/formly-editor.module';

@NgModule({
  imports: [
    FormlyEditorModule
  ],
  bootstrap: [AppComponent]
})
export class AppComponent {}

2. 修改AppComponent渲染设计器

//app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpLoadingService, LogoutService } from '@xmagic/nzx-antd/http-interceptor';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzxModalWrapService } from '@xmagic/nzx-antd/modal';
import { loadingService } from '@xmagic/nzx-antd/service';

@Component({
  selector: 'app-root',
  template: '<edt-formly-editor></edt-formly-editor>',
})
export class AppComponent implements OnInit {
  constructor( ) {}

  ngOnInit(): void {
  }
}

🏴授权协议

MIT

👍支持