docs(configurator): add configurator docs (#631)
* docs(configurator): add configurator docs phase one * docs(configurator): add several docs
Gene
GitHub
|
|
@ -0,0 +1,31 @@
|
|||
# CodeConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
代码设置器，是一个按钮，点击后会打开代码编辑器弹窗，用于编辑代码
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "CodeConfigurator",
|
||||
"props": {
|
||||
"language": "json"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------------ | -------------- | ------------------ |
|
||||
| title | `string \| object` | `''` | 代码编辑器弹窗标题 |
|
||||
| language | `'javascript' \| 'json'` | `'javascript'` | 代码编辑器语言 |
|
||||
| dataType | | | |
|
||||
| showFormatBtn | `boolean` | `true` | 是否显示格式化按钮 |
|
||||
| showErrorMsg | `boolean` | `true` | 是否显示错误信息 |
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
# CollectionConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
数据源设置器，用于选择数据源
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "CollectionConfigurator",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
无
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
# ColorConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
颜色设置器
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "ColorConfigurator",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
无
|
||||
|
After Width: | Height: | Size: 72 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
# HtmlAttributesConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
HTML属性设置器，可以添加自定义HTML属性
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "HtmlAttributesConfigurator",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
无
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
# HtmlTextConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
HTML元素文本设置器
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "HtmlTextConfigurator",
|
||||
"props": {
|
||||
"showRadioButton": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------- | ------- | ---------------------- |
|
||||
| showRadioButton | `boolean` | `false` | 是否显示标题元素选择器 |
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
# InputConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
类型为输入框的设置器，用于输入文本
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "InputConfigurator",
|
||||
"props": {
|
||||
"type": "text",
|
||||
"placeholder": "请输入id"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | ---------------------- | -------- | --------------------------------------------------------------------------- |
|
||||
| type | `"text" \| "textarea"` | `"text"` | 输入框类型 |
|
||||
| placeholder | `string` | -- | 输入框占位文本 |
|
||||
| dataType | `"Array"` | -- | 当值为`"Array"`时，会将输入框的值使用英文逗号分割，然后将属性的值设置成数组 |
|
||||
| rows | `number` | -- | 输入框行数，只对 `type="textarea"` 有效 |
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
# JsSlotConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
插槽设置器，可以控制使用哪些插槽以及给插槽传递参数
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "JsSlotConfigurator",
|
||||
"props": {
|
||||
"slots": ["header", "default"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| -------- | --------------- | ------ | -------- |
|
||||
| slots | `Array<string>` | `[]` | 插槽名称数组 |
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
# LayoutGridConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
行布局选择器，可以在预设的几种响应式布局中选择合适的布局
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "LayoutGridConfigurator",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
无
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,39 @@
|
|||
# NumberConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
数字设置器，可用于输入数字，可自定义数值范围与步进大小，并支持鼠标键盘增减
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "NumberConfigurator",
|
||||
"props": {
|
||||
"controls": true,
|
||||
"controlsPosition": "right",
|
||||
"max": 100,
|
||||
"min": 0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| controls | `boolean` | `true` | 是否使用加减按钮 |
|
||||
| controlsPosition | `'right' \| ''` | `'right'` | 加减按钮位置，可选值为 right，表示加减按钮均位于最右侧 |
|
||||
| max | `number` | `Infinity` | 规定组件可输入的最大数值，指定合法值的范围，支持整数和小数 |
|
||||
| min | `number` | `-Infinity` | 规定组件可输入的最小数值，指定合法值的范围，支持整数和小数 |
|
||||
| step | `number` | `1` | 步长 |
|
||||
| showUnit | `boolean` | `false` | 是否显示单位，如果为 true，组件值会包含单位 |
|
||||
| units | `Array<{value: string, label: string}>` | `[{ value: 'px', label: 'px' },{ value: '%', label: '%' }]` | 单位列表，可以通过选择器选择单位 |
|
||||
| selectedUnit | `string` | `'px'` | 默认选中的单位 |
|
||||
| unitSelectWidth | `string` | `'25px'` | 单位选择器的宽度，默认 25px |
|
||||
| allowEmpty | `boolean` | `false` | 是否允许输入为空 |
|
||||
| addonAfter | `string` | `''` | 显示的单位，如果 `addonAfter` 有值，则不会显示单位选择器 |
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
# RadioGroupConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
单选组设置器
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "RadioGroupConfigurator",
|
||||
"props": {
|
||||
"options": [
|
||||
{ "label": "auto", "text": "自适应" },
|
||||
{ "label": "fixed", "text": "固定" }
|
||||
],
|
||||
"type": "button"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| -------- | ---------------------------------------------------------------------------- | -------- | -------------- |
|
||||
| options | `Array<string \| { label: string, text: string \| Record<string, string> }>` | `[]` | 单选组设置列表 |
|
||||
| type | `'radio' \| 'button'` | `'radio` | 单选组展示形式 |
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,41 @@
|
|||
# SelectConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
类型为选择器的设置器，用于选择选项
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "SelectConfigurator",
|
||||
"props": {
|
||||
"options": [
|
||||
{
|
||||
"label": "mini",
|
||||
"value": "mini"
|
||||
},
|
||||
{
|
||||
"label": "small",
|
||||
"value": "small"
|
||||
},
|
||||
{
|
||||
"label": "medium",
|
||||
"value": "medium"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
| Prop名称 | 类型 | 默认值 | 说明 |
|
||||
| -------- | ---------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------ |
|
||||
| options | `Array<{ label: string, value: string }>` | -- | 可选项 |
|
||||
| multi | `boolean` | false | 是否允许选择多个选项 |
|
||||
| groups | `Array<{ label: string, content: string[], disabled: boolean }>` | -- | 对可选项进行分组。`content`数组里面的项目为可选项的`value`，表示这些可选项属于这个组 |
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
# SelectIconConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
图标设置器
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "SelectIconConfigurator",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
无
|
||||
|
After Width: | Height: | Size: 41 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
# SwitchConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
类型为开关的设置器
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "SwitchConfigurator",
|
||||
"props": {}
|
||||
}
|
||||
```
|
||||
|
||||
## Props说明
|
||||
|
||||
无
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
# VariableConfigurator
|
||||
|
||||
## 简介
|
||||
|
||||
变量绑定设置器，用于给属性绑定到变量
|
||||
|
||||
## 展示
|
||||
|
||||
|
||||
|
||||
## 配置示例
|
||||
|
||||
属性面板默认所有属性都会附加一个变量绑定设置器，以下几种情况除外：
|
||||
|
||||
1. 非第一级属性面板
|
||||
2. 只读
|
||||
3. 属性设置器为 `RelatedEditorConfigurator` 或 `RelatedColumnsConfigurator`
|
||||
|
||||
如果不需要绑定变量入口，可以将物料中不需要绑定变量的属性的 `bindState` 字段设置为 `false`
|
||||
|
||||
```json
|
||||
{
|
||||
"property": "tabs",
|
||||
"label": {
|
||||
"text": {
|
||||
"zh_CN": "选项卡"
|
||||
}
|
||||
},
|
||||
"bindState": false
|
||||
}
|
||||
|
||||
```
|
||||
|
After Width: | Height: | Size: 42 KiB |