background: #CCC;
}
```
-~~~
+````
#### 2.1.2 API 规范（A)
@@ -243,23 +241,22 @@ API 是组件的属性解释，给开发者作为组件属性配置的参考。
##### 通用命名
-| API 名称 | 类型 | 描述 | 常见变量 |
-| :------------- | :------------- | :----------------------------------------------------------- | :---------------------------------------------------- |
-| shape | string | 形状，从组件的外形来看有区别的时候，使用 shape | |
-| direction | enum | 方向，取值采用缩写的方式。 | hoz（水平）, ver（垂直） |
-| align | enum | 对齐方式 | tl, tc, tr, cl, cc, cr, bl, bc, br |
-| status | enum | 状态 | normal, success, error, warning |
-| size | enum | 大小 | small, medium, large 更大或更小可用 (xxs, xs, xl, xxl) |
-| type | enum or string | 分类:1. dom 结构不变、只有皮肤的变化 2.组件类型只有并列的几类 | normal, primary, secondary |
-| visible | boolean | 是否显示 | |
-| defaultVisible | boolean | 是否显示（非受控） | |
-| disabled | boolean | 禁用组件 | |
-| closable | bool/string | 允许关闭的方式 | |
-| htmlType | string | 当原生组件与 Fusion 组件的 type 产生冲突时，原生组件使用 `htmlType` | |
-| link | string | 链接 | |
-| dataSource | array | 列表数据源 | [{label, value}, {label, value}] |
-| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |
-
+| API 名称 | 类型 | 描述 | 常见变量 |
+| :------------- | :------------- | :------------------------------------------------------------------ | :----------------------------------------------------- |
+| shape | string | 形状，从组件的外形来看有区别的时候，使用 shape | |
+| direction | enum | 方向，取值采用缩写的方式。 | hoz（水平）, ver（垂直） |
+| align | enum | 对齐方式 | tl, tc, tr, cl, cc, cr, bl, bc, br |
+| status | enum | 状态 | normal, success, error, warning |
+| size | enum | 大小 | small, medium, large 更大或更小可用 (xxs, xs, xl, xxl) |
+| type | enum or string | 分类:1. dom 结构不变、只有皮肤的变化 2.组件类型只有并列的几类 | normal, primary, secondary |
+| visible | boolean | 是否显示 | |
+| defaultVisible | boolean | 是否显示（非受控） | |
+| disabled | boolean | 禁用组件 | |
+| closable | bool/string | 允许关闭的方式 | |
+| htmlType | string | 当原生组件与 Fusion 组件的 type 产生冲突时，原生组件使用 `htmlType` | |
+| link | string | 链接 | |
+| dataSource | array | 列表数据源 | `[{label, value}, {label, value}]` |
+| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |
##### 多选枚举
@@ -287,13 +284,15 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
##### 表单规范
- 支持[受控模式](https://reactjs.org/docs/forms.html#controlled-components)(value + onChange) （A)
- - value 控制组件数据展现
- - onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)
+ - value 控制组件数据展现
+ - onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)
- `value={undefined}`的时候清空数据，field 的 reset 函数会给所有组件下发 undefined 数据 (AA))
- 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart` (AA)
##### 属性的传递
+
**1. 原子组件（Atomic Component）**
+
> 最小粒子，不能再拆分的组件
举例：Input/Button/NumberPicker
@@ -317,15 +316,15 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
复合组件一般由两个及以上的原子组件/复合组件构成，比如：Select 由 Inupt + 弹窗组成，Search 由 Select + Button 组成，TreeSelect 由 Tree + Select 组成。
为了提高组件使用的便利性，对 API 属性的要求如下：
+
1. 复合组件核心的原子组件（比如 Search 的核心原子组件是 Input）的属性以及使用频率高的属性建议扁平化，让复合组件可以直接使用其属性；
2. 复合组件内的非核心原子组件，则通过 `xxxProps` （如 inputProps/btnProps）的方式，将参数传递到相应原子组件上。
-
**属性扁平化例子**：
比如 `Search` 组件由 `Input` 和 `Button` 构成，但是 `Search` 更像是 `Input` ，因此把 `Input` 作为主要组件，将属性扁平化。即在 `Search` 组件上直接使用一些 `Input` 的属性。 `
`
-比如 `Select` `TreeSelect` 都有弹层部分，`Overlay` `Overlay.Popup` 的 `visible` 属性使用率较高，一般用于 fixed 布局下的弹窗滚动跟随。因此把该属性暴露到最外层，简化使用 `
## setter 配置
-| 属性名 | 说明 |
-| --- | --- |
-| defaultValue | 默认值 |
-| options | 传入的数据源，**参数格式**: [{img: 'url', value: 'text', label/title: 'text'}, ...] \| [ 'text', 'text', ...] |
+
+| 属性名 | 说明 |
+| ------------ | ------------------------------------------------------------------------------------ | ----------------------- |
+| defaultValue | 默认值 |
+| options | 传入的数据源，**参数格式**: `[{img: 'url', value: 'text', label/title: 'text'}, ...] | [ 'text', 'text', ...]` |
## 返回类型
+
String | Number | Boolean
会返回 options 中的 value 值
diff --git a/docs/docs/guide/appendix/setterDetails/select.md b/docs/docs/guide/appendix/setterDetails/select.md
index 2e5039194..917f898b0 100644
--- a/docs/docs/guide/appendix/setterDetails/select.md
+++ b/docs/docs/guide/appendix/setterDetails/select.md
@@ -1,18 +1,22 @@
---
title: SelectSetter
---
+
## 简介
+
用来选择组件。在限定的可选性内进行选择，核心能力是选择
+
## 展示
## setter 配置
-| 属性名 | 说明 |
-| --- | --- |
-| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
-| defaultValue | 默认值 |
-| options | 传入的数据源，**参数格式**: [ {label/title: '文字', value: 'text'}, ...] |
+
+| 属性名 | 说明 |
+| ------------ | -------------------------------------------------------------------------- |
+| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
+| defaultValue | 默认值 |
+| options | 传入的数据源，**参数格式**: `[ {label/title: '文字', value: 'text'}, ...]` |
## 返回类型
diff --git a/docs/docs/guide/appendix/setterDetails/slot.md b/docs/docs/guide/appendix/setterDetails/slot.md
index 7559343d5..8ea3c9c4b 100644
--- a/docs/docs/guide/appendix/setterDetails/slot.md
+++ b/docs/docs/guide/appendix/setterDetails/slot.md
@@ -1,7 +1,9 @@
---
title: SlotSetter
---
+
## 简介
+
通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。
## 展示
@@ -15,14 +17,15 @@ title: SlotSetter
## setter 配置
-| 属性名 | 类型 | 说明 |
-| --- | --- | --- |
-| initialValue | Object | 默认值 { "type": "JSSlot", "params": [ "module" ], "value": [] } params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
-| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[]不同 |
-| checkedText | string | switch 选中文案，默认显示"启用" |
-| unCheckedText | string | switch 取消文案，默认显示"关闭" |
+| 属性名 | 类型 | 说明 |
+| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| initialValue | Object | 默认值 `{ "type": "JSSlot", "params": [ "module" ], "value": [] }` params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
+| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[] 不同 |
+| checkedText | string | switch 选中文案，默认显示"启用" |
+| unCheckedText | string | switch 取消文案，默认显示"关闭" |
## 配置示例
+
### 配置
```typescript
@@ -40,6 +43,7 @@ title: SlotSetter
}
}
```
+
### 组件
```typescript
@@ -47,7 +51,9 @@ function A(props) {
return props.propName;
}
```
+
## 带参数的插槽示例
+
### 配置
```typescript
@@ -66,6 +72,7 @@ function A(props) {
}
}
```
+
### 组件
组件需要传参数进行渲染，和普通示例的使用不一样。
@@ -76,6 +83,7 @@ function A(props) {
return props.propName(module);
}
```
+
### param 使用示例
1.开启插槽
diff --git a/docs/docs/guide/appendix/setterDetails/style.md b/docs/docs/guide/appendix/setterDetails/style.md
index c58f062f5..5bdbe6111 100644
--- a/docs/docs/guide/appendix/setterDetails/style.md
+++ b/docs/docs/guide/appendix/setterDetails/style.md
@@ -1,7 +1,9 @@
---
title: StyleSetter
---
+
## 简介
+
通过开启 StyleSetter，我们可以将样式配置面板来配置样式属性。
## 展示
@@ -10,19 +12,19 @@ title: StyleSetter
## setter 配置
-| 属性名 | 类型 | 说明 |
-| --- | --- | --- |
-| unit | String | 默认值 px 
|
-| placeholderScale | Number | 默认计算尺寸缩放 默认值为 1 
在没有设定数值的时候，系统会通过 window.getComputedStyle 来计算展示的数值。在某些场景下，例如手机场景，在编辑器展示的是 375 的实际宽度，但是实际设计尺寸是 750 的宽度，这个时候需要对这个计算尺寸设成 2 |
-| showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
-| isShowCssCode | Boolean | 默认值: true, 是否展示css源码编辑 |
-| layoutPropsConfig | Object | 布局样式设置 |
-| layoutPropsConfig.showDisPlayList | String[] | 默认值 ['inline', 'flex', 'block', 'inline-block', 'none'] 
可按需展示 |
-| layoutPropsConfig.isShowPadding | String | 默认值 true 
是否展示内边距（四个边） ||
-| layoutPropsConfig.isShowMargin | Boolean | 默认值 true 
是否展示外边距（四个边） ||
-| layoutPropsConfig.isShowWidthHeight | Boolean | 默认值 true 
是否展示宽高 |
-| fontPropsConfig | Object | 文字样式设置 |
-| fontPropsConfig.fontFamilyList | Array | [ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' },] 可以定制文字字体选项 |
-| positionPropsConfig | Object | 位置样式设置 |
-| positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 |
-| positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 |
+| 属性名 | 类型 | 说明 |
+| ----------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
+| unit | String | 默认值 px