添加render api

README.md

@@ -113,19 +113,24 @@ render(<BaseExample />);
 
 ### API 文档
 
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `columns` | `Array<Object>` | `[]` | 列配置数组，每列包含 `name`（唯一标识）、`title`（标题）、`color`（颜色）等属性。 |
-| `readOnly` | `boolean` | `false` | 是否只读模式，禁止用户调整列占比。 |
-| `disabled` | `boolean` | `false` | 是否禁用模式，禁止用户交互。 |
-| `onChange` | `Function` | - | 列占比变化时的回调函数，参数为调整后的占比对象。 |
+| 属性             | 类型              | 默认值                                                    | 说明 |
+|----------------|-----------------|--------------------------------------------------------|----|
+| `columns`      | `Array<Object>` | 列配置数组，每列包含 `name`、`title`、`min`、`max`、`color` 等属性。     |
+| `className`    | `string`        | 自定义组件类名。                                               |
+| `renderItem`   | `Function`      | 自定义列内容渲染函数，参数为 `{ item, value, valueStr, el, index }`。 |
+| `readOnly`     | `boolean`       | 是否只读模式，禁止调整列宽。                                         |
+| `disabled`     | `boolean`       | 是否禁用模式，禁止调整列宽。                                         |
+| `defaultValue` | `Object`        | 当前列宽比例值，键为列名，值为比例（0-1）非受控模式。                           |
+| `value`        | `Object`        | 当前列宽比例值，键为列名，值为比例（0-1）。                                |
+| `onChange`     | `Function`      | 列宽调整回调函数，参数为调整后的 `value` 对象。                           |
 
 ### 列配置 (`columns`)
 
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `name` | `string` | - | 列的唯一标识。 |
-| `title` | `string` | - | 列的标题。 |
-| `color` | `string` | - | 列的颜色（支持 CSS 颜色值）。 |
-| `min` | `number` | - | 列的最小占比（0-1）。 |
-| `max` | `number` | - | 列的最大占比（0-1）。 |
+| 属性       | 类型         | 默认值                        | 说明                |
+|----------|------------|----------------------------|-------------------|
+| `name`   | `string`   | -                          | 列的唯一标识。           |
+| `title`  | `string`   | -                          | 列的标题。             |
+| `color`  | `string`   | -                          | 列的颜色（支持 CSS 颜色值）。 |
+| `min`    | `number`   | -                          | 列的最小占比（0-1）。      |
+| `max`    | `number`   | -                          | 列的最大占比（0-1）。      |
+| `render` | `Function` | 自定义列值渲染函数，参数为 `{ value }`。 |

doc/api.md

@@ -1,18 +1,23 @@
 ### API 文档
 
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `columns` | `Array<Object>` | `[]` | 列配置数组，每列包含 `name`（唯一标识）、`title`（标题）、`color`（颜色）等属性。 |
-| `readOnly` | `boolean` | `false` | 是否只读模式，禁止用户调整列占比。 |
-| `disabled` | `boolean` | `false` | 是否禁用模式，禁止用户交互。 |
-| `onChange` | `Function` | - | 列占比变化时的回调函数，参数为调整后的占比对象。 |
+| 属性             | 类型              | 默认值                                                    | 说明 |
+|----------------|-----------------|--------------------------------------------------------|----|
+| `columns`      | `Array<Object>` | 列配置数组，每列包含 `name`、`title`、`min`、`max`、`color` 等属性。     |
+| `className`    | `string`        | 自定义组件类名。                                               |
+| `renderItem`   | `Function`      | 自定义列内容渲染函数，参数为 `{ item, value, valueStr, el, index }`。 |
+| `readOnly`     | `boolean`       | 是否只读模式，禁止调整列宽。                                         |
+| `disabled`     | `boolean`       | 是否禁用模式，禁止调整列宽。                                         |
+| `defaultValue` | `Object`        | 当前列宽比例值，键为列名，值为比例（0-1）非受控模式。                           |
+| `value`        | `Object`        | 当前列宽比例值，键为列名，值为比例（0-1）。                                |
+| `onChange`     | `Function`      | 列宽调整回调函数，参数为调整后的 `value` 对象。                           |
 
 ### 列配置 (`columns`)
 
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `name` | `string` | - | 列的唯一标识。 |
-| `title` | `string` | - | 列的标题。 |
-| `color` | `string` | - | 列的颜色（支持 CSS 颜色值）。 |
-| `min` | `number` | - | 列的最小占比（0-1）。 |
-| `max` | `number` | - | 列的最大占比（0-1）。 |
+| 属性       | 类型         | 默认值                        | 说明                |
+|----------|------------|----------------------------|-------------------|
+| `name`   | `string`   | -                          | 列的唯一标识。           |
+| `title`  | `string`   | -                          | 列的标题。             |
+| `color`  | `string`   | -                          | 列的颜色（支持 CSS 颜色值）。 |
+| `min`    | `number`   | -                          | 列的最小占比（0-1）。      |
+| `max`    | `number`   | -                          | 列的最大占比（0-1）。      |
+| `render` | `Function` | 自定义列值渲染函数，参数为 `{ value }`。 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne/column-split",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "通过拖动分隔条分配元素占比",
   "syntax": {
     "esmodules": true

src/index.js

@@ -6,7 +6,7 @@ import useControlValue from '@kne/use-control-value';
 import { MoreOutlined } from '@ant-design/icons';
 import style from './style.module.scss';
 
-const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props }) => {
+const ColumnSplit = ({ columns = [], className, renderItem, readOnly, disabled, ...props }) => {
   const [value, onChange] = useControlValue(props);
   if (columns.length === 0) {
     return null;
@@ -41,6 +41,13 @@ const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props })
     >
       {columns.map((column, index) => {
         const itemValue = get(value, column.name) || 1 / columns.length;
+        const valueStr = typeof column.render === 'function' ? column.render({ value: itemValue }) : `${Math.round(100 * itemValue)}%`;
+        const el = (
+          <Flex vertical align="center" justify="center">
+            {column.title}
+            <span>{valueStr}</span>
+          </Flex>
+        );
         return (
           <Splitter.Panel
             key={column.name || index}
@@ -52,9 +59,8 @@ const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props })
               '--color': column.color
             }}
           >
-            <Flex vertical justify="center" align="center" className={classnames(style['column-item-content'], 'column-item-content')}>
-              {column.title}
-              <span>{`${Math.round(100 * itemValue)}%`}</span>
+            <div className={classnames(style['column-item-content'], 'column-item-content')}>
+              {typeof renderItem === 'function' ? renderItem({ item: column, value: itemValue, valueStr, el, index }) : el}
               {index < columns.length - 1 && (
                 <Flex className={classnames(style['column-item-handler-left'], 'column-item-handler-left')}>
                   <MoreOutlined />
@@ -65,7 +71,7 @@ const ColumnSplit = ({ columns = [], className, readOnly, disabled, ...props })
                   <MoreOutlined />
                 </Flex>
               )}
-            </Flex>
+            </div>
           </Splitter.Panel>
         );
       })}