kubevela
/
kubevela.github.io
mirror of https://github.com/kubevela/kubevela.github.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Docs: change uischema doc (#516) 

Signed-off-by: barnettZQG <barnett.zqg@gmail.com>
This commit is contained in:
barnettZQG 2022-02-24 10:24:40 +08:00 committed by GitHub
parent ea0347fc71
commit 75d829a5b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/reference/ui-schema.md
View File

@ -41,22 +41,30 @@ Its workflow is in the figure above. The API Schema is generated through the def
The spec are as follows:
```
- jsonKey: string field name
label: string show name in UI
description: string help info
uiType: string the react component type in UI
sort: int sort number
validate: data validate rule.
```yaml
- jsonKey: string The field name
label: string The show name in UI
description: string The help info in UI
uiType: string The react component type in UI
sort: int The sort number
disabled: bool Disable this field.
style:
colSpan: int Defines the number of grids for the form, with 24 representing 100% width.
validate: The value validate rule, It must be defined as a whole.
defaultValue: any The default values.
required: bool
max: int
min: int
max: int The max value for number.
min: int The min value for number.
maxLength: int The max length for string.
minLength: int The min length for string.
pattern: string
options: Optional, for select forms
- label: string
value: string
immutable: bool Set the immutable is true, indicates that the parameter cannot be changed.
subParameters:
...
- jsonKey: string
...
```
### Supported react component types
@ -85,6 +93,7 @@ The spec are as follows:
- [ ] PVCSelect
- [x] CPUNumber
- [x] MemoryNumber
- [x] DiskNumber
- [x] K8sObjectsCode
#### Combination form
@ -93,9 +102,12 @@ The spec are as follows:
- [x] Strings
- [x] Structs
- [x] Group: render as a titled container
- [x] InnerGroup
- [ ] TabGroup
### Example
Ref：[https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas](https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas)
### How to expand
UI-Schema mainly extends front-end react components, refer to [https://github.com/oam-dev/velaux/tree/main/src/extends](https://github.com/oam-dev/velaux/tree/main/src/extends)

47
i18n/zh/docusaurus-plugin-content-docs/current/reference/ui-schema.md
View File

@ -41,22 +41,30 @@ template: {
UI Schema 包含的字段如下：
```
- jsonKey: string 字段名称
label: string UI 显示名称
description: string 描述信息
uiType: string UI 组件类型
sort: int 排序
validate: 数据校验规则
required: bool 是否必填
max: int 最大值
min: int 最小值
pattern: string 正则校验规则
options: 可选项，适用于选择性表单
- label: string 可选项显示名称
value: string 可选项值
subParameters: 下级参数
...
```yaml
- jsonKey: string 字段名称
label: string UI 显示名称
description: string 描述信息
uiType: string UI 组件类型
sort: int 排序
disabled: bool 是否禁用该字段
style: 样式定义
colSpan: int 表单栅格大小，24 代表 100% 宽度
validate: 数据校验规则，自定义后整体替换默认配置
defaultValue: any 默认值
required: bool 是否是必填参数
max: int 数字最大值
min: int 数字最小值
maxLength: int 最大字符长度
minLength: int 最小字符长度
pattern: string 正则校验规则
options: 可选项，适用于选择性表单
- label: string 可选项显示名称
value: string 可选项值
immutable: bool 是否为不可变字段，设为 true 则代表该字段不能在编辑中更改。
subParameters: 下级参数，结构一致
- jsonKey: string
...
```
### 已支持的类型
@ -85,6 +93,7 @@ UI Schema 包含的字段如下：
- [ ] PVCSelect: 目标集群的存储卷选择 （参数：clusterName, namespace）
- [x] CPUNumber: cpu 数值输入框 支持小数点后 2 位，默认单位为 Core
- [x] MemoryNumber: 内存数值输入框 2^n 数值输入方式，默认单位为 MB
- [x] DiskNumber: 默认单位为 GB
- [x] K8sObjectsCode: kubernetes yaml 编辑框，支持上传 yaml，输出多个 k8s 资源对象。
#### 组合表单
@ -96,9 +105,13 @@ UI Schema 包含的字段如下：
> AddByKV:env.name|env.value
> AddBySecret:env.name|env.valueFrom
- [x] Group: 组合（渲染为一个带标题的容器)
- [x] InnerGroup: 行内组合容器
- [ ] TabGroup: 条件判断 Tab，只有一组生效。
### 配置案例
参考：[https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas](https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas)
### 如何扩展
UI-Schema 主要扩展的是前端组件，参考 [https://github.com/oam-dev/velaux/tree/main/src/extends](https://github.com/oam-dev/velaux/tree/main/src/extends)

47
i18n/zh/docusaurus-plugin-content-docs/version-v1.2/reference/ui-schema.md
View File

@ -41,22 +41,30 @@ template: {
UI Schema 包含的字段如下：
```
- jsonKey: string 字段名称
label: string UI 显示名称
description: string 描述信息
uiType: string UI 组件类型
sort: int 排序
validate: 数据校验规则
required: bool 是否必填
max: int 最大值
min: int 最小值
pattern: string 正则校验规则
options: 可选项，适用于选择性表单
- label: string 可选项显示名称
value: string 可选项值
subParameters: 下级参数
...
```yaml
- jsonKey: string 字段名称
label: string UI 显示名称
description: string 描述信息
uiType: string UI 组件类型
sort: int 排序
disabled: bool 是否禁用该字段
style: 样式定义
colSpan: int 表单栅格大小，24 代表 100% 宽度
validate: 数据校验规则，自定义后整体替换默认配置
defaultValue: any 默认值
required: bool 是否是必填参数
max: int 数字最大值
min: int 数字最小值
maxLength: int 最大字符长度
minLength: int 最小字符长度
pattern: string 正则校验规则
options: 可选项，适用于选择性表单
- label: string 可选项显示名称
value: string 可选项值
immutable: bool 是否为不可变字段，设为 true 则代表该字段不能在编辑中更改。
subParameters: 下级参数，结构一致
- jsonKey: string
...
```
### 已支持的类型
@ -85,6 +93,7 @@ UI Schema 包含的字段如下：
- [ ] PVCSelect: 目标集群的存储卷选择 （参数：clusterName, namespace）
- [x] CPUNumber: cpu 数值输入框 支持小数点后 2 位，默认单位为 Core
- [x] MemoryNumber: 内存数值输入框 2^n 数值输入方式，默认单位为 MB
- [x] DiskNumber: 默认单位为 GB
- [x] K8sObjectsCode: kubernetes yaml 编辑框，支持上传 yaml，输出多个 k8s 资源对象。
#### 组合表单
@ -96,9 +105,13 @@ UI Schema 包含的字段如下：
> AddByKV:env.name|env.value
> AddBySecret:env.name|env.valueFrom
- [x] Group: 组合（渲染为一个带标题的容器)
- [x] InnerGroup: 行内组合容器
- [ ] TabGroup: 条件判断 Tab，只有一组生效。
### 配置案例
参考：[https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas](https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas)
### 如何扩展
UI-Schema 主要扩展的是前端组件，参考 [https://github.com/oam-dev/velaux/tree/main/src/extends](https://github.com/oam-dev/velaux/tree/main/src/extends)

34
versioned_docs/version-v1.2/reference/ui-schema.md
View File

@ -41,22 +41,30 @@ Its workflow is in the figure above. The API Schema is generated through the def
The spec are as follows:
```
- jsonKey: string field name
label: string show name in UI
description: string help info
uiType: string the react component type in UI
sort: int sort number
validate: data validate rule.
```yaml
- jsonKey: string The field name
label: string The show name in UI
description: string The help info in UI
uiType: string The react component type in UI
sort: int The sort number
disabled: bool Disable this field.
style:
colSpan: int Defines the number of grids for the form, with 24 representing 100% width.
validate: The value validate rule, It must be defined as a whole.
defaultValue: any The default values.
required: bool
max: int
min: int
max: int The max value for number.
min: int The min value for number.
maxLength: int The max length for string.
minLength: int The min length for string.
pattern: string
options: Optional, for select forms
- label: string
value: string
immutable: bool Set the immutable is true, indicates that the parameter cannot be changed.
subParameters:
...
- jsonKey: string
...
```
### Supported react component types
@ -85,6 +93,7 @@ The spec are as follows:
- [ ] PVCSelect
- [x] CPUNumber
- [x] MemoryNumber
- [x] DiskNumber
- [x] K8sObjectsCode
#### Combination form
@ -93,9 +102,12 @@ The spec are as follows:
- [x] Strings
- [x] Structs
- [x] Group: render as a titled container
- [x] InnerGroup
- [ ] TabGroup
### Example
Ref：[https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas](https://github.com/oam-dev/catalog/tree/master/addons/velaux/schemas)
### How to expand
UI-Schema mainly extends front-end react components, refer to [https://github.com/oam-dev/velaux/tree/main/src/extends](https://github.com/oam-dev/velaux/tree/main/src/extends)