@rchh/lowcode-engine-ext

Introduction

lowcode-engine-ext is the official collection of setters and required plugins for the LowCode Engine.

A setter displays and edits material (component) props. See the setter usage guide and the official setter list.

Usage

Load the package from a global CDN:

Method 1 (recommended): jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rchh/[email protected]/dist/css/engine-ext.css" />
<script src="https://cdn.jsdelivr.net/npm/@rchh/[email protected]/dist/js/engine-ext.js"></script>

Method 2: unpkg

<link rel="stylesheet" href="https://unpkg.com/@rchh/[email protected]/dist/css/engine-ext.css" />
<script src="https://unpkg.com/@rchh/[email protected]/dist/js/engine-ext.js"></script>

Extending the variable bind panel

Pass extraDataMap to extend the property bind panel:

ctx.skeleton.add({
  area: 'centerArea',
  type: 'Widget',
  content: pluginMap.VariableBindDialog,
  name: 'variableBindDialog',
  props: {
    getSchema: () => editorController.getSchema(),
    // Extend variable binding
    extraDataMap: {
      props: {
        name: 'Props', // Display name for the variable group
        key: 'props', // Property path, e.g. this.props
        getChildren: () => [
          {
            label: 'prop1',
            value: 'value1',
          },
          {
            label: 'prop2',
            children: [
              { label: 'propxxx', value: 1 }
            ]
          }
        ],
      }
    }
  },
});