96 lines
2.6 KiB
Markdown
96 lines
2.6 KiB
Markdown
# Develop UI components for Apps
|
|
|
|
With Lowcoder plugins, you can develop customized components that are consistent with native components for your specific scenarios.
|
|
|
|
## Initialization
|
|
|
|
Execute the following `yarn start` file:
|
|
|
|
```bash
|
|
# Project initiation
|
|
yarn create lowcoder-plugin my-plugin
|
|
|
|
# Go to the project root
|
|
cd my-plugin
|
|
|
|
# Start the development environment
|
|
yarn start
|
|
```
|
|
|
|
## Component development environment
|
|
|
|
After executing `yarn start`, the browser is automatically opened and you enter the component development environment.
|
|
|
|
## Plugin configurations
|
|
|
|
In `Lowcoder` field in `package.json` file, you need to define the component properties. For example, the following is the explanation of several fields:
|
|
|
|
* `comps` defines UI components contained in the plugin. For each component, the key name of the object is the unique identity, and the value is metadata.
|
|
* `comps[someCompKey].name` defines the component name shown in the **Insert** tab.
|
|
* `comps[someCompKey].icon` defines the component icon shown on the canvas. Use a relative path to where `package.json` file is located.
|
|
* `comps[someCompKey].layoutInfo` defines the component layout:
|
|
* w: width of the component. Counted by the number of grid cells (range: 1 - 24).
|
|
* h: height of the component. Counted by the number of grid cells (range: >= 1).
|
|
|
|
```bash
|
|
"Lowcoder": {
|
|
"description": "",
|
|
"comps": {
|
|
"hello_world": {
|
|
"name": "Hello World",
|
|
"icon": "./icons/hello_world.png",
|
|
"layoutInfo": {
|
|
"w": 12,
|
|
"h": 5
|
|
}
|
|
},
|
|
"counter": {
|
|
"name": "Counter",
|
|
"icon": "./icons/hello_world.png"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Export components
|
|
|
|
To export all the components, use `src/index.ts`, for example:
|
|
|
|
```bash
|
|
import HelloWorldComp from "./HelloWorldComp";
|
|
|
|
export default {
|
|
hello_world: HelloWorldComp,
|
|
};
|
|
```
|
|
|
|
The default exported object `key` needs to be consistent with the `key` configured in `comps` in `package.json` file.
|
|
|
|
## Publish plugins
|
|
|
|
When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command:
|
|
|
|
```
|
|
yarn build --publish
|
|
```
|
|
|
|
If you do not specify the parameter `--publish`, the `tar` file will be saved in the root folder.
|
|
|
|
## Import plugins
|
|
|
|
In the Lowcoder app, click **Insert** > **Extensions** > **Add npm plugin** in the right pane. 
|
|
|
|
Input your npm package's URL or name, and then you can use your customized components.
|
|
|
|
```bash
|
|
my-plugin
|
|
|
|
# or
|
|
|
|
https://www.npmjs.com/package/my-plugin
|
|
```
|
|
|
|
## Code demo
|
|
|
|
For code demo, refer to Lowcoder Github.
|