-
Notifications
You must be signed in to change notification settings - Fork 78
Closed
Description
- **系统: ** macOS 12.6
- **Node.js: ** v14.19.1
依次执行
npm init @alilc/element lowcode-material-demo
创建 React-单组件 物料项目yarn install
yarn lowcode:dev
src/index.ts
import * as React from 'react';
import { forwardRef, ForwardRefRenderFunction } from 'react';
interface ComponentProps {
title: string;
content: string;
hhhh: string;
}
const ExampleComponent = (props: ComponentProps, ref: any) => {
const { title, content, ...others } = props;
return (
<div ref={ref} className="ExampleComponent" {...others}>
<h1>{title}</h1>
<p>test test</p>
<p>{others.hhhh}</p>
{content || 'Hello ExampleComponent'}
</div>
);
};
const RefExampleComponent = forwardRef(ExampleComponent as ForwardRefRenderFunction<any, ComponentProps>);
RefExampleComponent.displayName = 'ExampleComponent';
export default RefExampleComponent;
meta.ts
import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
const LowcodeMaterialDemoMeta: ComponentMetadata = {
"componentName": "LowcodeMaterialDemo",
"title": "LowcodeMaterialDemo",
"docUrl": "",
"screenshot": "",
"devMode": "proCode",
"npm": {
"package": "lowcode-material-demo",
"version": "0.1.0",
"exportName": "default",
"main": "src/index.tsx",
"destructuring": false,
"subName": ""
},
"configure": {
"props": [
{
"title": {
"label": {
"type": "i18n",
"en-US": "title",
"zh-CN": "title"
}
},
"name": "title",
"setter": {
"componentName": "StringSetter",
"isRequired": true,
"initialValue": ""
}
},
{
"title": {
"label": {
"type": "i18n",
"en-US": "content",
"zh-CN": "content"
}
},
"name": "content",
"setter": {
"componentName": "StringSetter",
"isRequired": true,
"initialValue": ""
}
},
{
"title": {
"label": {
"type": "i18n",
"en-US": "hhhh",
"zh-CN": "hhhh"
}
},
"name": "hhhh",
"setter": {
"componentName": "StringSetter",
"isRequired": true,
"initialValue": ""
}
},
{
"title": {
"label": {
"type": "i18n",
"en-US": "cbb",
"zh-CN": "cbb"
}
},
"name": "cbb",
"setter": {
"componentName": "StringSetter",
"isRequired": true,
"initialValue": ""
}
},
{
"title": {
"label": {
"type": "i18n",
"en-US": "ref",
"zh-CN": "ref"
}
},
"name": "ref",
"setter": {
"componentName": "MixedSetter",
"props": {
"setters": [
{
"componentName": "FunctionSetter"
},
{
"componentName": "ObjectSetter",
"props": {
"config": {
"extraSetter": {
"componentName": "MixedSetter",
"isRequired": false,
"props": {}
}
}
},
"isRequired": false,
"initialValue": {}
}
]
}
}
},
{
"title": {
"label": {
"type": "i18n",
"en-US": "key",
"zh-CN": "key"
}
},
"name": "key",
"setter": {
"componentName": "MixedSetter",
"props": {
"setters": [
{
"componentName": "StringSetter",
"isRequired": false,
"initialValue": ""
},
{
"componentName": "NumberSetter",
"isRequired": false,
"initialValue": 0
}
]
}
}
}
],
"supports": {
"style": true
},
"component": {}
}
};
const snippets: Snippet[] = [
{
"title": "LowcodeMaterialDemo",
"screenshot": "",
"schema": {
"componentName": "LowcodeMaterialDemo",
"props": {}
}
}
];
export default {
...LowcodeMaterialDemoMeta,
snippets
};
meta.ts 中的内容是因为没有自动更新,然后手动修改的
Metadata
Metadata
Assignees
Labels
No labels