Element(2.15.13) Materials

Usage Example

pnpm

pnpm add @cdlab996/element-lowcode-materials2.7

Import the package and initialize the editor:

import { injectAssets } from '@alilc/lowcode-plugin-inject';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import assets from '@cdlab996/element-lowcode-materials2.7/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/[email protected]/dist/assets.json');
      material.setAssets(loadedAssets);
      // ...
    },
  };
};

editorInit.pluginName = 'editorInit';

export default editorInit;

assets.json

Here is an example of the assets.json file:

{
  "version": "1.0.0",
  "packages": [
    {
      "package": "@cdlab996/vant-lowcode-materials2.7",
      "version": "1.0.0",
      "library": "Cdlab996VantLowcodeMaterials2.7",
      "urls": [
        "https://unpkg.com/@cdlab996/[email protected]/dist/index.css",
        "https://unpkg.com/@cdlab996/[email protected]/dist/index.js"
      ]
    }
  ],
  "components": [
    {
      "exportName": "Cdlab996VantLowcodeMaterials2.7Meta",
      "url": "https://unpkg.com/@cdlab996/[email protected]/dist/meta.js",
      "package": {
        "npm": "@cdlab996/vant-lowcode-materials2.7"
      }
    }
  ],
  "sort": {
    "groupList": [],
    "categoryList": []
  }
}