Resizable

Demos

How to import

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

Single Component

Basic Usage and Callbacks You can set the initial size using defaultSize, and set drag callbacks with onResizeStart, onChange, and onResizeEnd.

interface Size {
    width?: string | number;
    height?: string | number;
}

Drag edge to resize

Code

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>
    );
}

Controlling Resize Directions

You can enable or disable specific resizing directions by setting the value of enable. All directions are enabled by default. A direction that is left out counts as enabled, so to enable only some directions, set the others to false explicitly. Passing false for enable renders no handles.

interface Enable {
    left?: boolean;
    right?: boolean;
    top?: boolean;
    bottom?: boolean;
    topLeft?: boolean;
    topRight?: boolean;
    bottomLeft?: boolean;
    bottomRight?: boolean;
}

disable

enable.left:false

Code

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>
    );
}

Setting Resizing Ratio

You can set the drag and resize ratio using ratio.

ratio=2

Code

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>
    );
}

Locking Aspect Ratio

You can lock the aspect ratio by setting lockAspectRatio. It can be a boolean or a number. If true, it locks to the initial aspect ratio; if a number, it locks to the given ratio.

lock

16 / 9

Code

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>
    );
}

Setting Maximum and Minimum Width/Height

You can set the maximum and minimum width and height using maxHeight, maxWidth, minHeight, and minWidth.

width在50到200之间，height在50到300之间

Code

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>
    );
}

Control Width/Height

You can control the size of the element through the size prop.

受控

Code

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>
    );
}

Setting Scale

You can scale the entire element by setting the scale prop.

scale 0.5

Code

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>
    );
}

Restricting Width/Height by an Element

You can restrict the width and height by setting the boundElement, which supports 'parent', 'window' or an HTMLElement.

bound：parent

Code

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>
    );
}

Customizing Corner Handler Styles

You can customize the drag handles for each direction using handleNode, and apply different styles using handleStyle and 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

Code

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>
    );
}

Allowing Incremental Width and Height Adjustment

You can allow gradual adjustments in width and height using the grid and snap properties. The grid property specifies the increments to which resizing should snap. The default value is [1, 1]. The snap property specifies the absolute pixel values to which resizing should snap. Both x and y are optional, allowing you to define only the desired axis. These two parameters can be combined with the snapGap property, which specifies the minimum gap required to move to the next target. The default is 0, meaning the target defined by grid/snap is always used.

interface Snap {
    x?: number[];
    y?: number[];
}

snap

Code

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>
    );
}

Group Component

Use the direction prop to set the resizing direction. Options are horizontal and vertical, defaulting to horizontal. Supports onResizeStart, onChange, and onResizeEnd callbacks, as well as setting min and max to control the maximum and minimum width/height.

Drag to resize min:10%

Drag to resize min:10% max:30%

Drag to resize

Code

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>
    );
}

Nested

Set the resizing direction using the direction prop. Options are horizontal and vertical.

header

tab

Drag to resize

Code

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

Code

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>
    );
}

Dynamic Direction

drag to resize

Code

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

A single resizable box.

Props

Property	Description	Type	Default
boundElement	Element that bounds the size: `parent`, `window` or an HTMLElement.	`'parent' \| 'window' \| HTMLElement`	-
boundsByDirection	Whether bounds are computed by drag direction. When `true`, dragging from a left or top handle limits the size by the distance from the side that stays put to the opposite edge of the bound element.	`boolean`	-
children	Content of the box, rendered before the handles.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
defaultSize	Initial width and height, as a number or a string (px, vw, vh or %).	`Size`	-
enable	Directions that can be resized. A direction not set to `false` is enabled; `false` renders no handles.	`Enable \| false`	`Type`
grid	Increment that resizing snaps to.	`[number, number]`	`[1, 1]`
handleClass	Class names of the handles, by direction.	`HandleClassName`	-
handleNode	Custom content of the handles, as React nodes that replace the default grip icon.	`HandleComponent`	-
handleStyle	Styles of the handles, by direction.	`HandleStyle`	-
handleWrapperClass	Class name of the element that wraps all handles.	`string`	-
handleWrapperStyle	Style of the element that wraps all handles.	`React.CSSProperties`	-
lockAspectRatio	Locks the aspect ratio: `true` keeps the initial one, a number is the width to height ratio.	`boolean \| number`	`false`
lockAspectRatioExtraHeight	Extra height in pixels (such as padding) left out of the ratio when the aspect ratio is locked.	`number`	`0`
lockAspectRatioExtraWidth	Extra width in pixels (such as padding) left out of the ratio when the aspect ratio is locked.	`number`	`0`
maxHeight	Maximum height.	`string \| number`	-
maxWidth	Maximum width.	`string \| number`	-
minHeight	Minimum height.	`string \| number`	-
minWidth	Minimum width.	`string \| number`	-
onChange	Called when a drag or arrow key changes the size, with the new size, the event and the direction.	`ResizeCallback`	-
onResizeEnd	Called when resizing ends, with the final size, the event and the direction.	`ResizeCallback`	-
onResizeStart	Called when resizing starts. Return `false` to cancel the resize.	`ResizeStartCallback`	-
ratio	Ratio of pointer movement to size change; pass `[width, height]` for per-axis ratios. Arrow keys always change the size by 10px, regardless of ratio and scale.	`number \| [number, number]`	`1`
ref	Reference to the root `div` element.	`Type`	-
scale	Scale applied to the element from outside, used to correct the pointer movement.	`number`	`1`
size	Controlled size, applied per axis: an axis left unset follows the drag. Write the new size back in `onChange` while dragging.	`Size`	-
snap	Absolute pixel values that resizing snaps to. Both `x` and `y` are optional.	`{ x?: number[]; y?: number[]; }`	-
snapGap	Minimum gap required to move to the next snap target.	`number`	`0`
style	Style of the root element. Its `width` and `height` are overridden by the size the component computes.	`React.CSSProperties`	-

Other native div attributes, such as id and aria-*, are passed through rest onto the root element.

ResizeGroup

Props

Property	Description	Type	Default
children	The `ResizeItem` and `ResizeHandler` elements in the group.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
direction	Resize direction within the group: `horizontal` or `vertical`.	`'horizontal' \| 'vertical'`	`"horizontal"`
ref	Reference to the root element.	`Type`	-

Other native div attributes are passed through rest onto the root element. The root flex-direction is always decided by direction.

ResizeHandler

Props

Property	Description	Type	Default
children	Content that replaces the default grip icon.	`React.ReactNode`	-
className	Class name of the handle.	`string`	-
direction	Ignored. The direction of the handle follows the `direction` of the `ResizeGroup` it is in.	`Direction`	-
disabled	Ignored. It does not disable the handle.	`boolean`	-
onResizeStart	Ignored. Use `onResizeStart` of `ResizeItem` for the callback when resizing starts.	`HandlerCallback`	-
ref	Reference to the root `div` element of the handle.	`Type`	-
style	Style of the handle.	`React.CSSProperties`	-

Native attributes are passed through rest onto the handle element. An aria-label you pass wins over the locale name, and the onKeyDown, onPointerDown, onPointerMove and onLostPointerCapture you pass run alongside the component's own.

ResizeItem

Props

Property	Description	Type	Default
children	Content of the item.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
defaultSize	Initial size. A string supports `%`, `px`, `vw` and `vh`; a number or numeric string takes a proportional share of the remaining space.	`string \| number`	-
max	Maximum size (`%`, `px`, `vw` or `vh`).	`string`	-
min	Minimum size (`%`, `px`, `vw` or `vh`).	`string`	-
onChange	Called when a drag or arrow key changes the size, with the new size, the event and the direction.	`ResizeCallback`	-
onResizeEnd	Called when resizing ends, with the final size, the event and the direction.	`ResizeCallback`	-
onResizeStart	Called when resizing starts. If the item on either side of the handle returns `false`, the resize is cancelled.	`ResizeStartCallback`	-
ref	Reference to the root element.	`Type`	-
style	Style of the root element.	`React.CSSProperties`	-

Other native div attributes are passed through rest onto the root element. ResizeGroup writes the size straight onto the element's style.width and style.height, so do not set those two through style.

Accessibility

Each axis of a single resizable box has one focusable separator handle: the right and bottom handles always are; when the right or bottom side is turned off in enable, the left or top handle takes over that axis. They are named from the locale pack and adjust the width and the height. Arrow keys change the size by a fixed 10px per press, regardless of ratio and scale, and are ignored while Alt, Ctrl or Meta is held. Pressing a handle with the right or middle mouse button does not start a resize.
ResizeHandler is a focusable separator. Its name also comes from the locale pack, and an aria-label you pass overrides it. Arrow keys along the group's direction move the items on either side of it by 1% of the group per press, or 10% with Shift; Home and End take the item before it to its smallest and largest size.
The root elements of Resizable, ResizeGroup and ResizeItem carry no semantics. When you pass aria-label or aria-labelledby, the root gets role="group".

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$z-resizable_background	20	伸缩框组件中背景的z-index，保持略高于handler
$height-row-handler	10px	单个伸缩框中上下handler的高度
$width-col-handler	10px	单个伸缩框中左右handler的宽度
$width-edge-handler	20px	单个伸缩框中边角handler的宽度
$height-edge-handler	20px	单个伸缩框中边角handler的高度
$width-horizontal-handler	10px	组合伸缩框中水平方向handler的宽度
$height-vertical-handler	10px	组合伸缩框中垂直方向handler的高度