组件
    基础

    伸缩框

    根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩

    代码演示

    如何引入

    import { Resizable } from '@fibrous/semi-ui-react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@fibrous/semi-ui-react';

    单个组件 基本使用

    通过defaultSize设置初始大小，可以通过onResizeStart、onChange、onResizeEnd设置拖拽的回调

    interface Size {
    width?: string | number;
    height?: string | number;
}
    Drag edge to resize
    代码
    import { useState } from 'react';
import { Resizable, Toast } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [text, setText] = useState('Drag edge to resize');
    const opts_1 = {
        content: 'resize start',
        duration: 1,
        stack: true,
    };
    const opts_2 = {
        content: 'resize end',
        duration: 1,
        stack: true,
    };
    return (
        <div style={{ width: '500px' }}>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)' }}
                defaultSize={{
                    width: '60%',
                    height: 300,
                }}
                onChange={() => {
                    setText('resizing');
                }}
                onResizeStart={() => {
                    Toast.info(opts_1);
                }}
                onResizeEnd={() => {
                    Toast.info(opts_2);
                    setText('Drag edge to resize');
                }}
            >
                <div style={{ marginLeft: '20%' }}>{text}</div>
            </Resizable>
        </div>
    );
}

    控制伸缩方向

    通过设置enable的值开启/关闭特定伸缩方向，默认值均为true；未写出的方向视为开启，要只开启部分方向，需把其余方向显式设为 false。enable 传 false 时不渲染任何手柄。

    interface Enable {
    left?: boolean;
    right?: boolean;
    top?: boolean;
    bottom?: boolean;
    topLeft?: boolean;
    topRight?: boolean;
    bottomLeft?: boolean;
    bottomRight?: boolean;
}
    disable
    enable.left:false
    代码
    import { useState } from 'react';
import { Resizable, Switch, Typography } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [b, setB] = useState(false);
    const { Title } = Typography;
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <div style={{ display: 'flex', alignItems: 'center', margin: 8 }}>
                <Switch aria-labelledby="resizable-enable-state" checked={b} onChange={setB} />
                <Title id="resizable-enable-state" heading={6} style={{ margin: 8 }}>
                    {b ? 'able' : 'disable'}
                </Title>
            </div>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)' }}
                enable={{
                    left: b,
                }}
                defaultSize={{
                    width: 200,
                    height: 200,
                }}
            >
                <div style={{ marginLeft: '20%' }}>{'enable.left:' + b}</div>
            </Resizable>
        </div>
    );
}

    设置变化比例

    通过ratio设置拖动和实际变化的比例

    ratio=2
    代码
    import { Resizable } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)' }}
                ratio={2}
                defaultSize={{
                    width: 200,
                    height: 200,
                }}
            >
                <div style={{ marginLeft: '20%' }}>ratio=2</div>
            </Resizable>
        </div>
    );
}

    锁定横纵比

    通过lockAspectRatio设置锁定横纵比,可以为boolean或number,为number时表示横纵比为number,为true时锁定初始横纵比

    lock
    16 / 9
    代码
    import { Resizable } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)', marginBottom: '10px' }}
                defaultSize={{
                    width: 400,
                    height: 300,
                }}
                lockAspectRatio
            >
                <div style={{ marginLeft: '20%' }}>lock</div>
            </Resizable>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)' }}
                defaultSize={{
                    width: 200,
                    height: (200 * 9) / 16,
                }}
                lockAspectRatio={16 / 9}
            >
                <div style={{ marginLeft: '20%' }}>16 / 9</div>
            </Resizable>
        </div>
    );
}

    设置最大，最小宽高

    可通过 maxHeight，maxWidth，minHeight，minWidth 设置最大，最小宽高

    width在50到200之间，height在50到300之间
    代码
    import { Resizable } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)' }}
                maxWidth={200}
                maxHeight={300}
                minWidth={50}
                minHeight={50}
                defaultSize={{
                    width: 100,
                    height: 100,
                }}
            >
                <div style={{ marginLeft: '20%' }}>width在50到200之间，height在50到300之间</div>
            </Resizable>
        </div>
    );
}

    受控宽高

    可通过 size 控制元素的宽高

    受控
    代码
    import { useState } from 'react';
import { Resizable, Button, type ResizableProps } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [size, setSize] = useState<NonNullable<ResizableProps['size']>>({ width: 200, height: 100 });
    const onButtonClick = () => {
        let realSize = { width: Number(size.width) + 10, height: Number(size.height) + 10 };
        setSize(realSize);
    };
    const onChange: ResizableProps['onChange'] = (s) => {
        setSize(s);
    };

    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Button onClick={onButtonClick}>set += 10</Button>
            <Resizable style={{ backgroundColor: 'var(--semi-grey-1)', marginTop: '10px' }} size={size} onChange={onChange}>
                <div style={{ marginLeft: '20%' }}>受控</div>
            </Resizable>
        </div>
    );
}

    设置缩放值

    通过设置 scale，整体缩放元素

    scale 0.5
    代码
    import { Resizable } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%', transform: 'scale(0.5)', transformOrigin: '0 0' }}>
            <Resizable
                style={{ backgroundColor: 'var(--semi-grey-1)' }}
                defaultSize={{
                    width: '60%',
                    height: '60%',
                }}
                scale={0.5}
            >
                <div style={{ marginLeft: '20%' }}>scale 0.5</div>
            </Resizable>
        </div>
    );
}

    根据元素限制元素宽高

    通过 boundElement 设置用于限制宽高的元素，支持 'parent'、'window' 或一个 HTMLElement

    bound：parent
    代码
    import { Resizable } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    return (
        <div style={{ width: '300px', height: '300px', border: 'var(--semi-color-border) 1px solid' }}>
            <Resizable
                style={{ marginLeft: '20%', backgroundColor: 'var(--semi-grey-1)' }}
                defaultSize={{
                    width: '60%',
                    height: 200,
                }}
                boundElement="parent"
            >
                <div style={{ marginLeft: '20%' }}>bound：parent</div>
            </Resizable>
        </div>
    );
}

    自定义边角 handler 样式

    可通过 handleNode 设置不同方向的拖动元素节点，可通过 handleStyle，handleClass 设置不同方向上的样式

    type HandleNode = {
    left?: ReactNode,
    right?: ReactNode,
    top?: ReactNode,
    bottom?: ReactNode,
    topLeft?: ReactNode,
    topRight?: ReactNode,
    bottomLeft?: ReactNode,
    bottomRight?: ReactNode,
};

type HandleStyle = {
    left?: React.CSSProperties,
    right?: React.CSSProperties,
    top?: React.CSSProperties,
    bottom?: React.CSSProperties,
    topLeft?: React.CSSProperties,
    topRight?: React.CSSProperties,
    bottomLeft?: React.CSSProperties,
    bottomRight?: React.CSSProperties,
};

type HandleClass = {
    left?: string,
    right?: string,
    top?: string,
    bottom?: string,
    topLeft?: string,
    topRight?: string,
    bottomLeft?: string,
    bottomRight?: string,
};
    right
    代码
    import { IconTransfer } from '@fibrous/semi-icons-react/lab';
import { Resizable } from '@fibrous/semi-ui-react';
export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{
                    marginLeft: '20%',
                    backgroundColor: 'var(--semi-grey-1)',
                    border: 'var(--semi-color-border) 1px solid',
                }}
                defaultSize={{
                    width: '60%',
                    height: 300,
                }}
                handleNode={{
                    right: (
                        <div
                            style={{
                                height: '100%',
                                display: 'flex',
                                alignItems: 'center',
                                width: 'fit-content',
                            }}
                        >
                            <IconTransfer />
                        </div>
                    ),
                }}
            >
                <div style={{ marginLeft: '20%' }}>right</div>
            </Resizable>
        </div>
    );
}

    允许阶段性调整宽高

    可通过 grid ，snap 属性允许逐渐调整宽高。 grid 属性用于指定调整大小应对齐的增量。默认为 [1, 1]。 snap 属性用于指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴。默认为空。以上两个参数可结合 snapGap 使用，该参数用于指定移动到下一个目标所需的最小间隙。默认为 0，这意味着始终使用 grid/snap 设定的目标。

    interface Snap {
    x?: number[];
    y?: number[];
}
    snap
    代码
    import { Resizable } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{
                    marginLeft: '20%',
                    backgroundColor: 'var(--semi-grey-1)',
                    border: 'var(--semi-color-border) 1px solid',
                }}
                defaultSize={{
                    width: '60%',
                    height: 300,
                }}
                grid={[100, 100]}
                snapGap={20}
            >
                <div style={{ marginLeft: '20%' }}>snap</div>
            </Resizable>
        </div>
    );
}

    组合组件 基本使用

    通过direction设置伸缩方向，可选值为horizontal和vertical，缺省为horizontal。支持onResizeStart、onChange、onResizeEnd回调，支持min、max设置最大最小宽高

    Drag to resize min:10%
    Drag to resize min:10% max:30%
    Drag to resize
    Drag to resize
    代码
    import { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [text, setText] = useState('Drag to resize');
    return (
        <div style={{ width: '1000px', height: '100px' }}>
            <ResizeGroup direction="horizontal">
                <ResizeItem
                    style={{
                        backgroundColor: 'var(--semi-grey-1)',
                        border: 'var(--semi-color-border) 1px solid',
                    }}
                    defaultSize="400px"
                    min="10%"
                    onChange={() => {
                        setText('resizing');
                    }}
                    onResizeEnd={() => {
                        setText('Drag to resize');
                    }}
                >
                    <div style={{ marginLeft: '20%' }}>{text + ' min:10%'}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={{
                        backgroundColor: 'var(--semi-grey-1)',
                        border: 'var(--semi-color-border) 1px solid',
                    }}
                    defaultSize="20%"
                    min="10%"
                    max="30%"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={{ marginLeft: '20%' }}>{text + ' min:10% max:30%'}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={{
                        backgroundColor: 'var(--semi-grey-1)',
                        border: 'var(--semi-color-border) 1px solid',
                    }}
                    defaultSize="0.5"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={{ marginLeft: '20%' }}>{text}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={{
                        backgroundColor: 'var(--semi-grey-1)',
                        border: 'var(--semi-color-border) 1px solid',
                    }}
                    defaultSize={1}
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={{ marginLeft: '20%' }}>{text}</div>
                </ResizeItem>
            </ResizeGroup>
        </div>
    );
}

    嵌套使用

    通过direction设置伸缩方向，可选值为horizontal和vertical

    header
    tab
    Drag to resize
    代码
    import { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup, Toast } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [text, setText] = useState('Drag to resize');
    const opts_1 = {
        content: 'resize start',
        duration: 1,
        stack: true,
    };
    const opts = {
        content: 'resize end',
        duration: 1,
        stack: true,
    };
    return (
        <div style={{ width: '1000px', height: '600px' }}>
            <ResizeGroup direction="vertical">
                <ResizeItem
                    style={{ backgroundColor: 'var(--semi-grey-1)' }}
                    defaultSize="20%"
                    onChange={() => {
                        setText('resizing');
                    }}
                    onResizeStart={() => {
                        Toast.info(opts_1);
                    }}
                    onResizeEnd={() => {
                        Toast.info(opts);
                        setText('Drag to resize');
                    }}
                >
                    <div style={{ marginLeft: '20%' }}>header</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    defaultSize="80%"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <ResizeGroup direction="horizontal">
                        <ResizeItem
                            style={{
                                backgroundColor: 'var(--semi-grey-1)',
                                border: 'var(--semi-color-border) 1px solid',
                            }}
                            defaultSize="25%"
                            onChange={() => {
                                setText('resizing');
                            }}
                            onResizeStart={() => {
                                Toast.info(opts_1);
                            }}
                            onResizeEnd={() => {
                                Toast.info(opts);
                                setText('Drag to resize');
                            }}
                        >
                            <div style={{ marginLeft: '20%' }}>tab</div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem
                            style={{
                                backgroundColor: 'var(--semi-grey-1)',
                                border: 'var(--semi-color-border) 1px solid',
                            }}
                            defaultSize="75%"
                            onChange={() => {
                                setText('resizing');
                            }}
                        >
                            <div style={{ marginLeft: '20%' }}>{text}</div>
                        </ResizeItem>
                    </ResizeGroup>
                </ResizeItem>
            </ResizeGroup>
        </div>
    );
}
    Drag to resize min:10% max:30%
    Drag to resize min:10%
    Drag to resize min:10% max:40%
    Drag to resize
    Drag to resize max:30%
    tab
    content
    代码
    import { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [text, setText] = useState('Drag to resize');

    return (
        <div style={{ width: '1000px', height: '600px' }}>
            <ResizeGroup direction="vertical">
                <ResizeItem defaultSize="80%">
                    <ResizeGroup direction="horizontal">
                        <ResizeItem
                            style={{
                                backgroundColor: 'var(--semi-grey-1)',
                                border: 'var(--semi-color-border) 1px solid',
                            }}
                            defaultSize="25%"
                            min="10%"
                            max="30%"
                        >
                            <div style={{ marginLeft: '20%' }}>{text + ' min:10% max:30%'}</div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem style={{ border: 'var(--semi-color-border) 1px solid' }} defaultSize="50%">
                            <div style={{ height: '100%' }}>
                                <ResizeGroup direction="vertical">
                                    <ResizeItem
                                        style={{
                                            backgroundColor: 'var(--semi-grey-1)',
                                            border: 'var(--semi-color-border) 1px solid',
                                        }}
                                        defaultSize="33%"
                                        min="10%"
                                        onChange={() => {
                                            setText('resizing');
                                        }}
                                        onResizeEnd={() => {
                                            setText('Drag to resize');
                                        }}
                                    >
                                        <div style={{ marginLeft: '20%' }}>{text + ' min:10%'}</div>
                                    </ResizeItem>
                                    <ResizeHandler />
                                    <ResizeItem
                                        style={{
                                            backgroundColor: 'var(--semi-grey-1)',
                                            border: 'var(--semi-color-border) 1px solid',
                                        }}
                                        defaultSize="33%"
                                        min="10%"
                                        max="40%"
                                    >
                                        <div style={{ marginLeft: '20%' }}>{text + ' min:10% max:40%'}</div>
                                    </ResizeItem>
                                    <ResizeHandler />
                                    <ResizeItem
                                        style={{
                                            backgroundColor: 'var(--semi-grey-1)',
                                            border: 'var(--semi-color-border) 1px solid',
                                        }}
                                    >
                                        <div style={{ marginLeft: '20%' }}>{text}</div>
                                    </ResizeItem>
                                </ResizeGroup>
                            </div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem
                            style={{
                                backgroundColor: 'var(--semi-grey-1)',
                                border: 'var(--semi-color-border) 1px solid',
                            }}
                            defaultSize="1"
                            max="30%"
                        >
                            <div style={{ marginLeft: '20%' }}>{text + ' max:30%'}</div>
                        </ResizeItem>
                    </ResizeGroup>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    defaultSize="20%"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <ResizeGroup direction="horizontal">
                        <ResizeItem
                            style={{
                                backgroundColor: 'var(--semi-grey-1)',
                                border: 'var(--semi-color-border) 1px solid',
                            }}
                            defaultSize="50%"
                        >
                            <div style={{ marginLeft: '20%' }}>tab</div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem
                            style={{
                                backgroundColor: 'var(--semi-grey-1)',
                                border: 'var(--semi-color-border) 1px solid',
                            }}
                            defaultSize="50%"
                        >
                            <div style={{ marginLeft: '20%' }}>content</div>
                        </ResizeItem>
                    </ResizeGroup>
                </ResizeItem>
            </ResizeGroup>
        </div>
    );
}

    动态方向

    drag to resize
    drag to resize
    drag to resize
    代码
    import { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup, Button } from '@fibrous/semi-ui-react';

export default function ResizableDemo() {
    const [text, setText] = useState('drag to resize');
    const [direction, setDirection] = useState<'horizontal' | 'vertical'>('horizontal');

    const changeDirection = () => {
        if (direction === 'horizontal') {
            setDirection('vertical');
        } else {
            setDirection('horizontal');
        }
    };
    return (
        <div style={{ width: '400px', height: '300px' }}>
            <Button onClick={changeDirection}>{direction}</Button>
            <ResizeGroup direction={direction}>
                <ResizeItem
                    onChange={() => {
                        setText('resizing');
                    }}
                    onResizeEnd={() => {
                        setText('drag to resize');
                    }}
                    defaultSize={5}
                >
                    <ResizeGroup direction="horizontal">
                        <ResizeItem
                            style={{ backgroundColor: 'var(--semi-grey-1)' }}
                            onChange={() => {
                                setText('resizing');
                            }}
                            onResizeEnd={() => {
                                setText('drag to resize');
                            }}
                        >
                            <div style={{ marginLeft: '20%', padding: '5px' }}>{text}</div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem
                            style={{ backgroundColor: 'var(--semi-grey-1)' }}
                            onChange={() => {
                                setText('resizing');
                            }}
                        >
                            <div style={{ marginLeft: '20%', padding: '5px' }}>{text}</div>
                        </ResizeItem>
                    </ResizeGroup>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={{ backgroundColor: 'var(--semi-grey-1)' }}
                    defaultSize={1.3}
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={{ marginLeft: '20%', padding: '5px' }}>{text}</div>
                </ResizeItem>
            </ResizeGroup>
        </div>
    );
}

    API 参考

    Resizable

    单个伸缩框组件。

    Props

    属性说明类型默认值
    boundElement限制宽高的元素：parent、window 或一个 HTMLElement。'parent' | 'window' | HTMLElement-
    boundsByDirection是否按拖动方向计算边界：为 true 时，从左侧或上侧手柄拖动，最大尺寸按元素固定的那一侧到限制元素对侧边缘的距离计算。boolean-
    children伸缩框内的内容，渲染在手柄之前。React.ReactNode-
    className根元素的类名。string-
    defaultSize初始宽高，支持数字和字符串（px、vw、vh、%）。Size-
    enable可伸缩的方向，未设置为 false 的方向均可拖动；传入 false 则不渲染任何手柄。Enable | falseType{ top: true, right: true, bottom: true, left: true, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true, }
    grid调整大小时对齐的增量。[number, number][1, 1]
    handleClass各方向手柄的类名。HandleClassName-
    handleNode各方向手柄的自定义内容，传入 React 节点，替换默认的握把图标。HandleComponent-
    handleStyle各方向手柄的样式。HandleStyle-
    handleWrapperClass包裹所有手柄的容器类名。string-
    handleWrapperStyle包裹所有手柄的容器样式。React.CSSProperties-
    lockAspectRatio锁定横纵比：true 按初始宽高锁定，数字为宽高比。boolean | numberfalse
    lockAspectRatioExtraHeight锁定横纵比时，不参与比例计算的额外高度（如内边距），单位为像素。number0
    lockAspectRatioExtraWidth锁定横纵比时，不参与比例计算的额外宽度（如内边距），单位为像素。number0
    maxHeight最大高度。string | number-
    maxWidth最大宽度。string | number-
    minHeight最小高度。string | number-
    minWidth最小宽度。string | number-
    onChange拖动或方向键改变尺寸时调用，参数为新尺寸、事件与方向。ResizeCallback-
    onResizeEnd结束伸缩时调用，参数为最终尺寸、事件与方向。ResizeCallback-
    onResizeStart开始伸缩时调用，返回 false 取消本次伸缩。ResizeStartCallback-
    ratio拖动距离与实际尺寸变化的比例，可传 [宽, 高]；方向键每次固定改变 10px，不受 ratio 与 scale 影响。number | [number, number]1
    ref根元素（div）的引用。TypeReact.Ref<HTMLDivElement>-
    scale元素被外部缩放的比例，用于校正指针位移。number1
    size受控尺寸，按轴生效：未设置的轴仍跟随拖拽。拖动时需在 onChange 中把新尺寸写回。Size-
    snap调整大小时对齐的绝对像素值，x 与 y 均可省略。{ x?: number[]; y?: number[]; }-
    snapGap移动到下一个对齐目标所需的最小间隙。number0
    style根元素的样式；其中的 width、height 会被组件计算出的尺寸覆盖。React.CSSProperties-

    其他原生 div 属性（如 id、aria-*）经 rest 展开到根元素上。

    ResizeGroup

    Props

    属性说明类型默认值
    children组内的 ResizeItem 与 ResizeHandler。React.ReactNode-
    className根元素的类名。string-
    direction组内的伸缩方向，可选 horizontal 或 vertical。'horizontal' | 'vertical'"horizontal"
    ref根元素的引用。TypeReact.Ref<HTMLDivElement>-

    其他原生 div 属性经 rest 展开到根元素上；根元素的 flex-direction 始终由 direction 决定。

    ResizeHandler

    Props

    属性说明类型默认值
    children替换默认握把图标的内容。React.ReactNode-
    className手柄的类名。string-
    direction组件忽略此属性，手柄方向由所在 ResizeGroup 的 direction 决定。Direction-
    disabled组件忽略此属性，不会禁用手柄。boolean-
    onResizeStart组件忽略此属性，开始伸缩的回调请使用 ResizeItem 的 onResizeStart。HandlerCallback-
    ref手柄根元素（div）的引用。TypeReact.Ref<HTMLDivElement>-
    style手柄的样式。React.CSSProperties-

    其他原生 div 属性经 rest 展开到手柄元素上；传入的 aria-label 优先于语言包名称，传入的 onKeyDown、onPointerDown、onPointerMove、onLostPointerCapture 会和组件自己的处理一并执行。

    ResizeItem

    Props

    属性说明类型默认值
    children项的内容。React.ReactNode-
    className根元素的类名。string-
    defaultSize初始尺寸。字符串支持 %、px、vw、vh；纯数字或数字字符串表示按比例分配剩余空间。string | number-
    max最大尺寸（%、px、vw 或 vh）。string-
    min最小尺寸（%、px、vw 或 vh）。string-
    onChange拖动或方向键改变尺寸时调用，参数为新尺寸、事件与方向。ResizeCallback-
    onResizeEnd结束伸缩时调用，参数为最终尺寸、事件与方向。ResizeCallback-
    onResizeStart开始伸缩时调用，手柄任一侧的项返回 false 即取消本次伸缩。ResizeStartCallback-
    ref根元素的引用。TypeReact.Ref<HTMLDivElement>-
    style根元素的样式。React.CSSProperties-

    其他原生 div 属性经 rest 展开到根元素上。ResizeGroup 把尺寸直接写在元素的 style.width 与 style.height 上，因此不要通过 style 设置这两项。

    Accessibility

    • 单个伸缩框每个轴上只有一个手柄是可聚焦的 separator：右侧与下侧手柄始终是；对应的右侧或下侧被 enable 关闭时，该轴由左侧或上侧手柄接替。名称取自语言包，分别调整宽度与高度；聚焦后按方向键，每次固定改变 10px，不受 ratio、scale 影响；同时按住 Alt、Ctrl 或 Meta 时不响应。鼠标右键、中键按下手柄不开始调整。
    • ResizeHandler 是可聚焦的 separator，名称同样取自语言包，传入 aria-label 可覆盖。沿组的方向按方向键移动它两侧的项，每次移动组尺寸的 1%，按住 Shift 为 10%；Home、End 把它前一项调到最小、最大尺寸。
    • Resizable、ResizeGroup、ResizeItem 的根元素没有语义；传入 aria-label 或 aria-labelledby 时，根元素带上 role="group"。

    设计变量

    下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。
    Sass 变量值用法
    $z-resizable_background20伸缩框组件中背景的z-index，保持略高于handler
    $height-row-handler10px单个伸缩框中上下handler的高度
    $width-col-handler10px单个伸缩框中左右handler的宽度
    $width-edge-handler20px单个伸缩框中边角handler的宽度
    $height-edge-handler20px单个伸缩框中边角handler的高度
    $width-horizontal-handler10px组合伸缩框中水平方向handler的宽度
    $height-vertical-handler10px组合伸缩框中垂直方向handler的高度