FcDesigner

Appearance

Prototype Methods ​

FcDesigner provides several key prototype methods to extend and configure the designer. Detailed descriptions and examples of these methods:

Import Custom Components ​

Import custom components into the designer and optionally specify a preview component. This is very useful for extending new components in the designer.

typescript
type component = (name: string, component: Component, preview?: Component) => void;

Parameters:

  • name: The component name, used as an identifier to recognize the component in the designer.
  • component: The actual component object, which will be used for drag-and-drop operations in the designer.
  • preview (optional): Component used for preview in the designer. If not provided, only component is used.

Example:

js
import FcDesigner from '@form-create/designer';

FcDesigner.component('myCustomComponent', MyCustomComponent, MyCustomComponentPreview);

Renderer for Display ​

Get the FormCreate renderer used for form display.

typescript
  type formCreate = FormCreate;

Renderer for Design ​

Get the FormCreate renderer used for form design.

typescript
  type designerForm = FormCreate;

Import Menu Categories ​

Globally import menu categories

typescript
  type addMenu = (menu: Menu | Menu[], before?: boolean) => void;

Parameters:

  • menu: Menu category
  • before (optional): When true, displays at the front.

Example:

js
import FcDesigner from '@form-create/designer';

FcDesigner.addMenu({
    name: 'Business',
    title: 'Business Components',
});

Import Drag Rules ​

Globally import drag rules

typescript
  type addDragRule = (dragRule: DragRule | DragTemplateRule | Array<DragRule | DragTemplateRule>, before?: boolean) => void;

Parameters:

  • dragRule: Drag rule
  • before (optional): When true, displays at the front.

Example:

js
import FcDesigner from '@form-create/designer';

FcDesigner.addDragRule({
    menu: 'Business',
    icon: 'icon-title',
    label: 'Title',
    // Unique ID
    name: 'title',
    // Events that can be configured for the component
    event: ['click'],
    //,,,,
});