@arco-design/web-react

import { CSSProperties, ReactNode } from 'react'; /** * @title ResizeBox */ export interface ResizeBoxProps { style?: CSSProperties; className?: string | string[]; /** * @zh 宽度，受控属性 * @en The width of ResizeBox * @version 2.7.0 */ width?: number; /** * @zh 高度，受控属性 * @en The height of ResizeBox * @version 2.7.0 */ height?: number; /** * @zh 伸缩框的 html 标签 * @en The html tag of ResizeBox * @defaultValue div */ component?: string; /** * @zh 可以进行伸缩的边，有上、下、左、右可以使用，默认是右方向。 * @en The edges can be Resize, It can be `up`, `down`, `left`, `right` * @defaultValue ['right'] */ directions?: Array<'left' | 'right' | 'top' | 'bottom'>; /** * @zh 定制伸缩杆的图标，四个方向都支持定制。 * @en Custom the icon of Split,All four directions are supported * @defaultValue {} */ resizeIcons?: { top?: ReactNode; bottom?: ReactNode; left?: ReactNode; right?: ReactNode; }; /** * @zh 定制伸缩杆的内容，四个方向都支持定制。 * @en Custom the content of Split,All four directions are supported * @defaultValue {} */ resizeTriggers?: { top?: ReactNode; bottom?: ReactNode; left?: ReactNode; right?: ReactNode; }; /** * @zh 开始拖拽之前的回调 * @en Callback when the start of resize. */ onMovingStart?: () => void; /** * @zh 拖拽中的回调 * @en Callback when resizing * @version `size` in `2.7.0` */ onMoving?: (e: MouseEvent, size: { width: number; height: number; }) => void; /** * @zh 拖拽结束之后的回调 * @en Callback when the end of resize */ onMovingEnd?: () => void; } /** * @title ResizeBox.Split */ export interface SplitProps { style?: CSSProperties; className?: string | string[]; /** * @zh 分割框的 html 标签 * @en The html tag of Split * @defaultValue div */ component?: string; /** * @zh 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割 * @en The direction of Split. It can be `horizontal` and `vertical` * @defaultValue horizontal * @version `reverse` in `2.35.0` */ direction?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse'; /** * @zh 定制伸缩杆的图标 * @en Custom the icon of Split */ icon?: ReactNode; /** * @zh 定制伸缩杆的内容 * @en Custom the content of Split */ trigger?: ReactNode; /** * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px * @en Split size. It can be 0~1 representing a percentage, or a specific number of pixels, ex 300px * @defaultValue 0.5 */ size?: number | string; /** * @zh 最小阈值 * @en Minimum threshold */ min?: number | string; /** * @zh 最大阈值 * @en Maximum threshold */ max?: number | string; /** * @zh 面板，[firstPane, secondPane] * @en panes,[firstPane, secondPane] */ panes: ReactNode[]; /** * @zh 禁用 * @en Whether the split is disabled */ disabled?: boolean; /** * @zh 开始拖拽之前的回调 * @en Callback when the start of resize */ onMovingStart?: () => void; /** * @zh 拖拽中的回调 * @en Callback when moving * @version `size` in `2.14.0` */ onMoving?: (e: MouseEvent, size: number | string) => void; /** * @zh 拖拽结束之后的回调 * @en Callback when the end of resize */ onMovingEnd?: () => void; /** * @zh 面板大小变化的回调 * @en Callback when pane resized * @version 2.25.0 */ onPaneResize?: (paneContainers: HTMLElement[]) => void; } /** * @title ResizeBox.SplitGroup in `2.27.0` */ export interface SplitGroupProps { style?: CSSProperties; className?: string | string[]; /** * @zh 分割框的 html 标签 * @en The html tag of SplitGroup * @defaultValue div */ component?: string; /** * @zh 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割 * @en The direction of Split. It can be `horizontal` and `vertical` * @defaultValue horizontal */ direction?: 'horizontal' | 'vertical'; /** * @zh 定制伸缩杆的图标 * @en Custom the icon of Split */ icon?: ReactNode; /** * @zh 面板 * @en panes */ panes: SplitGroupPane[]; /** * @zh 开始拖拽之前的回调 * @en Callback when the start of resize */ onMovingStart?: (activeIndex: number) => void; /** * @zh 拖拽中的回调, `size` 参数是各个面板占的像素值 * @en Callback when moving */ onMoving?: (e: MouseEvent, size: string[], activeIndex: number) => void; /** * @zh 拖拽结束之后的回调 * @en Callback when the end of resize */ onMovingEnd?: (activeIndex: number) => void; /** * @zh 面板大小变化的回调 * @en Callback when pane resized */ onPaneResize?: (paneContainers: HTMLElement[]) => void; } /** * @title ResizeBox.SplitGroup.CollapsedConfig */ export interface CollapsedConfig { /** * @zh 快速折叠按钮的icon * @en Quick collapse button icon */ icon?: ReactNode; /** * @zh 点击快速折叠的回调 * @en Click the callback for quick folding */ onClick?: (e: any, collapsed: any, activeIndex: any, direction: 'prev' | 'next') => void; } /** * @title ResizeBox.SplitGroup.Pane */ export interface SplitGroupPane { /** * @zh 当前面板的内容 * @en The contents of the current panel */ content: ReactNode; /** * @zh 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px * @en The size of the segmentation can be 0~1 representing a percentage, or a pixel with a specific value, such as 300px */ size?: number | string; /** * @zh 最小阈值，优先级比 `max`高，并且会影响相邻面板的阈值。 * @en Maximum threshold, The priority is higher than `max` and will affect the threshold of adjacent panels. */ min?: number | string; /** * @zh 最大阈值 * @en Minimum threshold */ max?: number | string; /** * @zh 禁用，将不会展示伸缩杆。 * @en disabled, the split bar will not be displayed */ disabled?: boolean; /** * @zh 是否支持快速折叠; * @en Whether to support fast collapsed */ collapsible?: boolean | { prev?: boolean | CollapsedConfig; next?: boolean | CollapsedConfig; }; /** * @zh 是否支持拖拽伸缩 * @en Whether to support drag and drop * @defaultValue true */ resizable?: boolean; /** * @zh 定制伸缩杆内容, 参数分别表示向前快速收缩、拖拽伸缩触发器、向后快速收缩的触发器 * @en Customize the content of the Split */ trigger?: (prevNode: ReactNode, resizeNode: ReactNode, nextNode: ReactNode) => ReactNode; }