Resizable

Demos

How to import

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
    import { ResizeItem, ResizeHandler, ResizeGroup } from '@fibrous/semi-ui-vue';
</script>

Single Component

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

Listen with @resizeStart, @change and @resizeEnd. onResizeStart is a function prop (return false to cancel the resize), bound with @resizeStart as usual; change and resizeEnd are events.

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

Drag edge to resize

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { Resizable, Toast } from '@fibrous/semi-ui-vue';

    const text = ref('Drag edge to resize');
    const opts_1 = {
        content: 'resize start',
        duration: 1,
        stack: true,
    };
    const opts_2 = {
        content: 'resize end',
        duration: 1,
        stack: true,
    };

    function onResizeStart() {
        Toast.info(opts_1);
    }

    function onResizeEnd() {
        Toast.info(opts_2);
        text.value = 'Drag edge to resize';
    }
</script>

<template>
    <div :style="{ width: '500px' }">
        <Resizable :defaultSize="{ width: '60%', height: 300 }" :style="{ backgroundColor: 'var(--semi-grey-1)' }" @change="text = 'resizing'" @resizeEnd="onResizeEnd" @resizeStart="onResizeStart">
            <div :style="{ marginLeft: '20%' }">{{ text }}</div>
        </Resizable>
    </div>
</template>

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

<script setup lang="ts">
    import { ref } from 'vue';
    import { Resizable, Switch, Typography } from '@fibrous/semi-ui-vue';

    const { Title } = Typography;
    const enabled = ref(false);
</script>

<template>
    <div :style="{ width: '500px', height: '60%' }">
        <div :style="{ display: 'flex', alignItems: 'center', margin: '8px' }">
            <Switch v-model="enabled" aria-labelledby="resizable-enable-state" />
            <Title id="resizable-enable-state" :heading="6" :style="{ margin: '8px' }">
                {{ enabled ? 'able' : 'disable' }}
            </Title>
        </div>
        <Resizable :defaultSize="{ width: 200, height: 200 }" :enable="{ left: enabled }" :style="{ backgroundColor: 'var(--semi-grey-1)' }">
            <div :style="{ marginLeft: '20%' }">{{ 'enable.left:' + enabled }}</div>
        </Resizable>
    </div>
</template>

Setting Resizing Ratio

You can set the drag and resize ratio using ratio.

ratio=2

Code

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

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

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

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

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

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

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

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

Control Width/Height

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

In Vue, use it with v-model:size.

受控

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Resizable, type ResizableProps } from '@fibrous/semi-ui-vue';

    const size = ref<NonNullable<ResizableProps['size']>>({ width: 200, height: 100 });

    function grow() {
        size.value = { width: Number(size.value.width) + 10, height: Number(size.value.height) + 10 };
    }
</script>

<template>
    <div :style="{ width: '500px', height: '60%' }">
        <Button @click="grow">set += 10</Button>
        <Resizable v-model:size="size" :style="{ backgroundColor: 'var(--semi-grey-1)', marginTop: '10px' }">
            <div :style="{ marginLeft: '20%' }">受控</div>
        </Resizable>
    </div>
</template>

Setting Scale

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

scale 0.5

Code

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

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

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

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

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

Customizing Corner Handler Styles

You can customize the drag handle content for each direction with the handle slot. It is called once for each enabled direction, and its scoped direction parameter is that handle's direction, so return the content for the direction you want. A direction that returns nothing keeps its handle element. Apply different styles with handleStyle and handleClass.

type HandleStyle = {
    left?: StyleValue;
    right?: StyleValue;
    top?: StyleValue;
    bottom?: StyleValue;
    topLeft?: StyleValue;
    topRight?: StyleValue;
    bottomLeft?: StyleValue;
    bottomRight?: StyleValue;
};

type HandleClass = {
    left?: string;
    right?: string;
    top?: string;
    bottom?: string;
    topLeft?: string;
    topRight?: string;
    bottomLeft?: string;
    bottomRight?: string;
};

right

Code

<script setup lang="ts">
    import { IconTransfer } from '@fibrous/semi-icons-vue/lab';
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div :style="{ width: '500px', height: '60%' }">
        <Resizable
            :defaultSize="{ width: '60%', height: 300 }"
            :style="{
                marginLeft: '20%',
                backgroundColor: 'var(--semi-grey-1)',
                border: 'var(--semi-color-border) 1px solid',
            }"
        >
            <div :style="{ marginLeft: '20%' }">right</div>
            <template #handle="{ direction }">
                <div v-if="direction === 'right'" :style="{ height: '100%', display: 'flex', alignItems: 'center', width: 'fit-content' }">
                    <IconTransfer />
                </div>
            </template>
        </Resizable>
    </div>
</template>

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

<script setup lang="ts">
    import { Resizable } from '@fibrous/semi-ui-vue';
</script>

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

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.

ResizeItem is listened to with @resizeStart, @change and @resizeEnd as well: onResizeStart is a function prop, bound with @resizeStart as usual; change and resizeEnd are events.

Drag to resize min:10%

Drag to resize min:10% max:30%

Drag to resize

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { ResizeGroup, ResizeHandler, ResizeItem } from '@fibrous/semi-ui-vue';

    const text = ref('Drag to resize');
    const itemStyle = {
        backgroundColor: 'var(--semi-grey-1)',
        border: 'var(--semi-color-border) 1px solid',
    };
</script>

<template>
    <div :style="{ width: '1000px', height: '100px' }">
        <ResizeGroup direction="horizontal">
            <ResizeItem defaultSize="400px" min="10%" :style="itemStyle" @change="text = 'resizing'" @resizeEnd="text = 'Drag to resize'">
                <div :style="{ marginLeft: '20%' }">{{ text + ' min:10%' }}</div>
            </ResizeItem>
            <ResizeHandler />
            <ResizeItem defaultSize="20%" max="30%" min="10%" :style="itemStyle" @change="text = 'resizing'">
                <div :style="{ marginLeft: '20%' }">{{ text + ' min:10% max:30%' }}</div>
            </ResizeItem>
            <ResizeHandler />
            <ResizeItem defaultSize="0.5" :style="itemStyle" @change="text = 'resizing'">
                <div :style="{ marginLeft: '20%' }">{{ text }}</div>
            </ResizeItem>
            <ResizeHandler />
            <ResizeItem :defaultSize="1" :style="itemStyle" @change="text = 'resizing'">
                <div :style="{ marginLeft: '20%' }">{{ text }}</div>
            </ResizeItem>
        </ResizeGroup>
    </div>
</template>

Nested

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

header

tab

Drag to resize

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { ResizeGroup, ResizeHandler, ResizeItem, Toast } from '@fibrous/semi-ui-vue';

    const text = ref('Drag to resize');
    const opts_1 = {
        content: 'resize start',
        duration: 1,
        stack: true,
    };
    const opts = {
        content: 'resize end',
        duration: 1,
        stack: true,
    };
    const itemStyle = {
        backgroundColor: 'var(--semi-grey-1)',
        border: 'var(--semi-color-border) 1px solid',
    };

    function onResizeStart() {
        Toast.info(opts_1);
    }

    function onResizeEnd() {
        Toast.info(opts);
        text.value = 'Drag to resize';
    }
</script>

<template>
    <div :style="{ width: '1000px', height: '600px' }">
        <ResizeGroup direction="vertical">
            <ResizeItem defaultSize="20%" :style="{ backgroundColor: 'var(--semi-grey-1)' }" @change="text = 'resizing'" @resizeEnd="onResizeEnd" @resizeStart="onResizeStart">
                <div :style="{ marginLeft: '20%' }">header</div>
            </ResizeItem>
            <ResizeHandler />
            <ResizeItem defaultSize="80%" @change="text = 'resizing'">
                <ResizeGroup direction="horizontal">
                    <ResizeItem defaultSize="25%" :style="itemStyle" @change="text = 'resizing'" @resizeEnd="onResizeEnd" @resizeStart="onResizeStart">
                        <div :style="{ marginLeft: '20%' }">tab</div>
                    </ResizeItem>
                    <ResizeHandler />
                    <ResizeItem defaultSize="75%" :style="itemStyle" @change="text = 'resizing'">
                        <div :style="{ marginLeft: '20%' }">{{ text }}</div>
                    </ResizeItem>
                </ResizeGroup>
            </ResizeItem>
        </ResizeGroup>
    </div>
</template>

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

<script setup lang="ts">
    import { ref } from 'vue';
    import { ResizeGroup, ResizeHandler, ResizeItem } from '@fibrous/semi-ui-vue';

    const text = ref('Drag to resize');
    const itemStyle = {
        backgroundColor: 'var(--semi-grey-1)',
        border: 'var(--semi-color-border) 1px solid',
    };
    const borderStyle = { border: 'var(--semi-color-border) 1px solid' };
</script>

<template>
    <div :style="{ width: '1000px', height: '600px' }">
        <ResizeGroup direction="vertical">
            <ResizeItem defaultSize="80%">
                <ResizeGroup direction="horizontal">
                    <ResizeItem defaultSize="25%" max="30%" min="10%" :style="itemStyle">
                        <div :style="{ marginLeft: '20%' }">{{ text + ' min:10% max:30%' }}</div>
                    </ResizeItem>
                    <ResizeHandler />
                    <ResizeItem defaultSize="50%" :style="borderStyle">
                        <div :style="{ height: '100%' }">
                            <ResizeGroup direction="vertical">
                                <ResizeItem defaultSize="33%" min="10%" :style="itemStyle" @change="text = 'resizing'" @resizeEnd="text = 'Drag to resize'">
                                    <div :style="{ marginLeft: '20%' }">{{ text + ' min:10%' }}</div>
                                </ResizeItem>
                                <ResizeHandler />
                                <ResizeItem defaultSize="33%" max="40%" min="10%" :style="itemStyle">
                                    <div :style="{ marginLeft: '20%' }">{{ text + ' min:10% max:40%' }}</div>
                                </ResizeItem>
                                <ResizeHandler />
                                <ResizeItem :style="itemStyle">
                                    <div :style="{ marginLeft: '20%' }">{{ text }}</div>
                                </ResizeItem>
                            </ResizeGroup>
                        </div>
                    </ResizeItem>
                    <ResizeHandler />
                    <ResizeItem defaultSize="1" max="30%" :style="itemStyle">
                        <div :style="{ marginLeft: '20%' }">{{ text + ' max:30%' }}</div>
                    </ResizeItem>
                </ResizeGroup>
            </ResizeItem>
            <ResizeHandler />
            <ResizeItem defaultSize="20%" @change="text = 'resizing'">
                <ResizeGroup direction="horizontal">
                    <ResizeItem defaultSize="50%" :style="itemStyle">
                        <div :style="{ marginLeft: '20%' }">tab</div>
                    </ResizeItem>
                    <ResizeHandler />
                    <ResizeItem defaultSize="50%" :style="itemStyle">
                        <div :style="{ marginLeft: '20%' }">content</div>
                    </ResizeItem>
                </ResizeGroup>
            </ResizeItem>
        </ResizeGroup>
    </div>
</template>

Dynamic Direction

drag to resize

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, ResizeGroup, ResizeHandler, ResizeItem } from '@fibrous/semi-ui-vue';

    const text = ref('drag to resize');
    const direction = ref<'horizontal' | 'vertical'>('horizontal');
    const itemStyle = { backgroundColor: 'var(--semi-grey-1)' };
    const contentStyle = { marginLeft: '20%', padding: '5px' };

    function changeDirection() {
        direction.value = direction.value === 'horizontal' ? 'vertical' : 'horizontal';
    }
</script>

<template>
    <div :style="{ width: '400px', height: '300px' }">
        <Button @click="changeDirection">{{ direction }}</Button>
        <ResizeGroup :direction="direction">
            <ResizeItem :defaultSize="5" @change="text = 'resizing'" @resizeEnd="text = 'drag to resize'">
                <ResizeGroup direction="horizontal">
                    <ResizeItem :style="itemStyle" @change="text = 'resizing'" @resizeEnd="text = 'drag to resize'">
                        <div :style="contentStyle">{{ text }}</div>
                    </ResizeItem>
                    <ResizeHandler />
                    <ResizeItem :style="itemStyle" @change="text = 'resizing'">
                        <div :style="contentStyle">{{ text }}</div>
                    </ResizeItem>
                </ResizeGroup>
            </ResizeItem>
            <ResizeHandler />
            <ResizeItem :defaultSize="1.3" :style="itemStyle" @change="text = 'resizing'">
                <div :style="contentStyle">{{ text }}</div>
            </ResizeItem>
        </ResizeGroup>
    </div>
</template>

API

A single resizable box.

Props

Property	Description	Type	Default
size	Controlled size, applied per axis: an axis left unset follows the drag. Used with v-model:size.	`Size`	`semiGlobalDefault("Resizable", "size")`
defaultSize	Initial width and height, as a number or a string (px/vw/vh/%).	`Size`	`semiGlobalDefault("Resizable", "defaultSize")`
enable	Directions that can be resized. A direction not set to false is enabled; false renders no handles.	`false \| Enable`	`Type`
grid	Increment that resizing snaps to.	`[number, number]`	`semiDefault("Resizable", "grid", [1, 1])`
snap	Absolute pixel values that resizing snaps to. Both x and y are optional.	`{ x?: number[] \| undefined; y?: number[] \| undefined; }`	`semiGlobalDefault("Resizable", "snap")`
snapGap	Minimum gap required to move to the next snap target.	`number`	`semiDefault("Resizable", "snapGap", 0)`
boundElement	Element that bounds the size: 'parent', 'window' or an HTMLElement.	`HTMLElement \| "parent" \| "window"`	`semiGlobalDefault("Resizable", "boundElement")`
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`	`semiGlobalDefault("Resizable", "boundsByDirection")`
minWidth	Minimum width.	`string \| number`	`semiGlobalDefault("Resizable", "minWidth")`
minHeight	Minimum height.	`string \| number`	`semiGlobalDefault("Resizable", "minHeight")`
maxWidth	Maximum width.	`string \| number`	`semiGlobalDefault("Resizable", "maxWidth")`
maxHeight	Maximum height.	`string \| number`	`semiGlobalDefault("Resizable", "maxHeight")`
lockAspectRatio	Locks the aspect ratio: true keeps the initial one, a number is the width to height ratio.	`number \| boolean`	`semiDefault("Resizable", "lockAspectRatio", false)`
lockAspectRatioExtraWidth	Extra width in pixels (such as padding) left out of the ratio when the aspect ratio is locked.	`number`	`semiDefault("Resizable", "lockAspectRatioExtraWidth", 0)`
lockAspectRatioExtraHeight	Extra height in pixels (such as padding) left out of the ratio when the aspect ratio is locked.	`number`	`semiDefault("Resizable", "lockAspectRatioExtraHeight", 0)`
scale	Scale applied to the element from outside, used to correct the pointer movement.	`number`	`semiDefault("Resizable", "scale", 1)`
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]`	`semiDefault("Resizable", "ratio", 1)`
handleStyle	Styles of the handle in each direction.	`Type`	`semiGlobalDefault("Resizable", "handleStyle")`
handleClass	Class names of the handle in each direction.	`HandleClassName`	`semiGlobalDefault("Resizable", "handleClass")`
handleWrapperStyle	Style of the element that wraps all handles.	`StyleValue`	`semiGlobalDefault("Resizable", "handleWrapperStyle")`
handleWrapperClass	Class name of the element that wraps all handles.	`string`	`semiGlobalDefault("Resizable", "handleWrapperClass")`
onResizeStart	Called when resizing starts. Return false to cancel; it remains a function prop so its result can be read, bound with @resizeStart as usual.	`ResizeStartCallback`	`undefined`

Events

Event	Description	Callback parameters
update:size	Emitted when a drag or arrow key changes the size, for v-model:size to write back.	`[size: Size]`
change	Emitted when a drag or arrow key changes the size, with the new size, the event and the direction.	`Type`
resizeEnd	Emitted when resizing ends, with the final size, the event and the direction.	`Type`

Slots

Slot	Description	Scope parameters
default	Content of the resizable box.	`any`
handle	Content of the handle in each enabled direction. It is called once per enabled direction, with direction set to that handle's direction.	`ResizableHandleSlotProps`

Exposes

Name	Description	Type
None

class, style and native attributes are passed in through attrs and land on the root element. The root style is applied before the size the component computes, so a width or height you pass does not freeze the drag.

ResizeGroup

Props

Property	Description	Type	Default
direction	Resize direction within the group: horizontal lays items side by side, vertical stacks them.	`"horizontal" \| "vertical"`	`semiDefault("ResizeGroup", "direction", "horizontal")`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	ResizeItem and ResizeHandler children, which register themselves with the group once mounted.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes are passed in through attrs and land on the root element. flex-direction is always decided by direction.

ResizeHandler

Props

Property	Description	Type	Default
None

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Replaces the default grip icon.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes are passed in through attrs and land on the handle element. An aria-label you pass wins over the locale name, and the pointer and key listeners you pass run alongside the component's own.

ResizeItem

Props

Property	Description	Type	Default
min	Minimum size (%, px, vw or vh).	`string`	`semiGlobalDefault("ResizeItem", "min")`
max	Maximum size (%, px, vw or vh).	`string`	`semiGlobalDefault("ResizeItem", "max")`
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`	`semiGlobalDefault("ResizeItem", "defaultSize")`
onResizeStart	Called when resizing starts. If the item on either side of the handler returns false, the resize is cancelled; it remains a function prop so its result can be read, bound with @resizeStart as usual.	`ResizeStartCallback`	`undefined`

Events

Event	Description	Callback parameters
change	Emitted when a drag or arrow key changes the size, with the new size, the event and the direction.	`Type`
resizeEnd	Emitted when resizing ends, with the final size, the event and the direction.	`Type`

Slots

Slot	Description	Scope parameters
default	Content of the item.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes are passed in through attrs and land on the root element. ResizeGroup writes the size straight onto the element's style.width and style.height, so pass style as an object rather than a string.

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的高度