docs: add setters

NetEase · Jan 30, 2024 · 5ca8fc6 · 5ca8fc6
1 parent 24d8413
commit 5ca8fc6
Showing 1 changed file with 76 additions and 3 deletions.
diff --git a/apps/website/docs/designer/customize/setters.mdx b/apps/website/docs/designer/customize/setters.mdx
@@ -1,5 +1,78 @@
 # 设置器自定义
 
-:::tip
-正在编写中，敬请期待。
-:::
+属性设置器用于在配置面板中展示特定配置项的配置逻辑。Tango 内置了多种标准的属性设置器，对于一些特殊场景，内置的属性设置器可能无法满足你的需要，此时开发者可以扩展自己的属性设置。
+
+## 内置属性设置器
+
+| 设置器名          | 接收值类型                           | 设置器说明                 | 可配置项           |
+| ----------------- | ------------------------------------ | -------------------------- | ------------------ |
+| eventSetter       | expression                           | 动作函数或事件监听器设置器 |                    |
+| actionListSetter  |                                      | ActionList 的 value 设置器 |                    |
+| boolSetter        | boolean                              | 布尔值设置器               |                    |
+| choiceSetter      | `{ label: string, value: string }[]` | RadioGroup 设置器          | - options 选项列表 |
+| pickerSetter      | `{ label: string, value: string }[]` | 下拉值设置器               | - options 选项列表 |
+| colorSetter       | string                               | 色彩                       |                    |
+| dateSetter        | string                               | 日期设置器                 |                    |
+| dateRangeSetter   | `string[]`                           | 日期范围设置器             |                    |
+| timeSetter        | `string`                             | 时间设置器                 |                    |
+| timeRangeSetter   | `string[]`                           | 时间范围设置器             |                    |
+| expressionSetter  | expression                           | 表达式设置器               |                    |
+| jsonSetter        | json expression                      | JSON 表达式设置器          |                    |
+| jsxSetter         | jsx expression                       | JSX 设置器                 |                    |
+| numberSetter      | number                               | 数字类型设置器             |                    |
+| textSetter        | string                               | 文本设置器                 |                    |
+| textAreaSetter    | string                               | 文本域设置器               |                    |
+| modelSetter       | string                               | 变量绑定设置器             |                    |
+| enumSetter        | enum                                 | 枚举值设置器               |                    |
+| sliderSetter      | number                               | 滑块设置器                 |                    |
+| listSetter        | `object[]`                           | 列表值设置器               |                    |
+| renderPropsSetter | Function                             | render props 设置器        |                    |
+
+## 注册自定义属性设置器
+
+### 属性设置器的实现标准
+
+属性设置器组件是一个标准的受控型表单组件，开发者所开发的组件只需要暴露 `value` 和 `onChange(value)` 两个属性让属性面板的表单容器进行控制即可。
+
+例如，我们可以实现一个简单的字符串设置器 StringSetter，其实现如下：
+
+```jsx
+function StringSetter({ value, onChange, ...rest }) {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  return <input value={value} onChange={handleChange} />;
+}
+```
+
+### 注册属性设置器
+
+注册属性设置器非常简单，只需要借助设置器暴露出来的 `registerSetter` 即可。
+
+```jsx
+import { registerSetter } from '@music163/tango-designer';
+
+// 注册自定义 setter
+registerSetter({
+  name: 'stringSetter',
+  component: StringSetter,
+});
+```
+
+### 使用自定义的属性设置器
+
+在组件的物料协议中直接声明对应的属性设置器名称即可。例如：
+
+```jsx
+const prototype = {
+  name: 'PageHeader',
+  title: 'PageHeader',
+  props: [
+    {
+      name: 'title',
+      title: '标题',
+      setter: 'stringSetter',
+    },
+  ],
+};
+```