跳至正文
Wener Notes

x-render

约 1 分钟阅读

alibaba/x-render

json
{
  // 布局样式控制
  "displayType": "row",
  "labelWidth": 60,
  "type": "object",
  "properties": {
    // 数据字段定义
    "input": {
      "title": "简单输入框",
      // 组件数据类型定义
      "type": "string",
      "min": 6,
      "rules": [
        {
          "pattern": "^[A-Za-z0-9]+$",
          "message": "只允许填写英文字母和数字"
        }
      ]
    },
    "select": {
      "title": "单选",
      "type": "string",
      "enum": ["a", "b", "c"],
      "enumNames": ["选项1", "选项2", "选项3"],
      // 控制使用的组件
      "widget": "radio"
    },
    //
    "showSetting": {
      "title": "是否展示网址",
      "type": "boolean"
    },
    "siteUrl": {
      "title": "网址",
      "type": "string",
      "placeholder": "此处必填",
      // 联动控制
      "hidden": "{{formData.showSetting !== true}}",
      "required": true,
      "props": {
        "addonBefore": "https://",
        "addonAfter": ".com"
      }
    }
  }
}

关联信息

反向链接、本文链接的其他页面和外部资料。

反向链接

  • Low Code Design
    笔记 · x-render

    Low Code - 讲究 编辑,关联,任意 组件 · 组件的特性 · 配置化 · Schema化 · 可以参考设计,只实现配置化 · 模型 · ProseMirror 的 Schema 模型值得借鉴参考 · HTML/JSX - type/tag, attributes, children

参考资料

GitHub1 条
其他外链1 条
最近更新commit 6b73767编辑