Guide
独立部署
Schema预览
在线体验
Github
Guide
独立部署
Schema预览
在线体验
Github

渲染器接入—前端

概述

平台提供了 SDK 版的渲染器，用于 SCHEMA 到视图的渲染；

使用

安裝

npm
yarn
pnpm
bun
npm install @lowcode-set-up-platform/nexus-render-core -S

效果

通过规范的 Schema 渲染组件或者页面:

DETAILS
{
      "componentName": "Component",
      "fileName": "example",
      "props": {},
      "children": [
        {
          "children": [],
          "componentName": "Header",
          "exportName": "Header",
          "id": "XXfdEXujjZV5kou1t863V",
          "name": "header",
          "props": {
            "name": "Header内容",
            "style": {
              "text-align": "center",
              "color": "rgb(255, 255, 255)",
              "height": "64px",
              "padding-inline": "48px",
              "line-height": "64px",
              "background-color": "rgb(64, 150, 255)"
            }
          }
        },
        {
          "componentName": "Container",
          "exportName": "Container",
          "id": "XXfdEXujfdfdgu1t863V",
          "name": "container",
          "props": {
            "style": {
              "display": "flex", "flex-direction": "row"
            }
          },
          "children": [
            {
              "children": [],
              "componentName": "Sider",
              "exportName": "Sider",
              "id": "XXwecfjjZV5kou1t863V",
              "name": "sider",
              "props": {
                "name": "Sider内容",
                "style": {
                  "text-align": "center",
                  "line-height": "120px",
                  "color": "rgb(255, 255, 255)",
                  "background-color": "rgb(22, 119, 255)",
                  "flex": "0 0 25%",
                  "max-width": "25%",
                  "min-width": "25%",
                  "width": "25%"
                }
              }
            },
            {
              "children": [],
              "componentName": "Content",
              "exportName": "Content",
              "id": "XXwecfjjZVitdrt63V",
              "name": "content",
              "props": {
                "name": "Content内容",
                "style": {
                  "text-align": "center",
                  "min-height": "120px",
                  "line-height": "120px",
                  "color": "rgb(255, 255, 255)",
                  "background-color": "rgb(9, 88, 217)",
                  "flex": "auto"
                }
              }
            }
          ]

        },
        {
          "children": [],
          "componentName": "Footer",
          "exportName": "Footer",
          "id": "XXfdEXujjZV5kou1t863V",
          "name": "footer",
          "props": {
            "name": "Footer内容",
            "style": {
              "text-align": "center",
              "color": "rgb(255, 255, 255)",
              "height": "64px",
              "padding-inline": "48px",
              "line-height": "64px",
              "background-color": "rgb(64, 150, 255)"
            }
          }
        }
      ]
    }

注意

TIP

目前仅仅支持 React 技术栈，后续提供 Vue等其他技术栈的 SDK。

ON THIS PAGE