Ant Design Vue(4.1.0) Materials

Component material complete list

• [x] Button

Usage Example

pnpm

pnpm add @cdlab996/antd-lowcode-materials

Import the package and initialize the editor:

import { injectAssets } from '@alilc/lowcode-plugin-inject'
import { IPublicModelPluginContext } from '@alilc/lowcode-types'
import assets from '@cdlab996/antd-lowcode-materials/dist/assets.json'

const editorInit = (ctx: IPublicModelPluginContext) => {
  return {
    name: 'editor-init',
    async init() {
      const { material, project } = ctx

      const loadedAssets = await injectAssets(assets)
      material.setAssets(loadedAssets)
      // ...
    },
  }
}

editorInit.pluginName = 'editorInit'

export default editorInit

CDN

import { injectAssets } from '@alilc/lowcode-plugin-inject'
import { IPublicModelPluginContext } from '@alilc/lowcode-types'

const editorInit = (ctx: IPublicModelPluginContext) => {
  return {
    name: 'editor-init',
    async init() {
      const { material, project } = ctx

      const loadedAssets = await injectAssets('https://unpkg.com/@cdlab996/antd-lowcode-materials/dist/assets.json')
      material.setAssets(loadedAssets)
      // ...
    },
  }
}

editorInit.pluginName = 'editorInit'

export default editorInit

assets.json

Here is an example of the assets.json file:

{
  "version": "0.0.1",
  "packages": [
    {
      "package": "@cdlab996/lowcode-materials-antd",
      "version": "0.0.1",
      "library": "Cdlab996AntdLowcodeMaterials",
      "urls": [
        "https://unpkg.com/@cdlab996/antd-lowcode-materials/dist/index.css",
        "https://unpkg.com/@cdlab996/antd-lowcode-materials/dist/index.js"
      ]
    }
  ],
  "components": [
    {
      "exportName": "Cdlab996AntdLowcodeMaterialsMeta",
      "url": "https://unpkg.com/@cdlab996/antd-lowcode-materials/dist/meta.js",
      "package": {
        "npm": "@cdlab996/antdlowcode-materials"
      }
    }
  ],
  "sort": {
    "groupList": [],
    "categoryList": []
  }
}

📜 License

MIT License © 2023-PRESENT cdLab996