Resizable

Demos

How to import

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

Single Component

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

onResizeStart, onChange and onResizeEnd are all callback props, and returning false from onResizeStart cancels the resize; style only accepts a string.

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

Drag edge to resize

Code

<script lang="ts">
    import { Resizable, Toast } from '@fibrae/semi-ui-svelte';

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

    const onResizeStart = () => {
        Toast.info(opts_1);
    };

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

<div style="width: 500px">
    <Resizable defaultSize={{ width: '60%', height: 300 }} onChange={() => (text = 'resizing')} {onResizeEnd} {onResizeStart} style="background-color: var(--semi-grey-1)">
        <div style="margin-left: 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

<script lang="ts">
    import { Resizable, Switch, TypographyTitle } from '@fibrae/semi-ui-svelte';

    let enabled = $state(false);
</script>

<div style="width: 500px; height: 60%">
    <div style="display: flex; align-items: center; margin: 8px">
        <Switch aria-labelledby="resizable-enable-state" bind:checked={enabled} />
        <TypographyTitle heading={6} id="resizable-enable-state" style="margin: 8px">
            {enabled ? 'able' : 'disable'}
        </TypographyTitle>
    </div>
    <Resizable defaultSize={{ width: 200, height: 200 }} enable={{ left: enabled }} style="background-color: var(--semi-grey-1)">
        <div style="margin-left: 20%">{'enable.left:' + enabled}</div>
    </Resizable>
</div>

Setting Resizing Ratio

You can set the drag and resize ratio using ratio.

ratio=2

Code

<script lang="ts">
    import { Resizable } from '@fibrae/semi-ui-svelte';
</script>

<div style="width: 500px; height: 60%">
    <Resizable defaultSize={{ width: 200, height: 200 }} ratio={2} style="background-color: var(--semi-grey-1)">
        <div style="margin-left: 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

<script lang="ts">
    import { Resizable } from '@fibrae/semi-ui-svelte';
</script>

<div style="width: 500px; height: 60%">
    <Resizable defaultSize={{ width: 400, height: 300 }} lockAspectRatio style="background-color: var(--semi-grey-1); margin-bottom: 10px">
        <div style="margin-left: 20%">lock</div>
    </Resizable>
    <Resizable defaultSize={{ width: 200, height: (200 * 9) / 16 }} lockAspectRatio={16 / 9} style="background-color: var(--semi-grey-1)">
        <div style="margin-left: 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

<script lang="ts">
    import { Resizable } from '@fibrae/semi-ui-svelte';
</script>

<div style="width: 500px; height: 60%">
    <Resizable defaultSize={{ width: 100, height: 100 }} maxHeight={300} maxWidth={200} minHeight={50} minWidth={50} style="background-color: var(--semi-grey-1)">
        <div style="margin-left: 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.

size is a one-way prop and cannot be bound with bind:size: while dragging, write the new size back in onChange to the state passed to size; otherwise the size stays at the value of size.

受控

Code

<script lang="ts">
    import { Button, Resizable, type ResizableProps } from '@fibrae/semi-ui-svelte';

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

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

<div style="width: 500px; height: 60%">
    <Button onclick={grow}>set += 10</Button>
    <Resizable onChange={(next) => (size = next)} {size} style="background-color: var(--semi-grey-1); margin-top: 10px">
        <div style="margin-left: 20%">受控</div>
    </Resizable>
</div>

Setting Scale

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

scale 0.5

Code

<script lang="ts">
    import { Resizable } from '@fibrae/semi-ui-svelte';
</script>

<div style="width: 500px; height: 60%; transform: scale(0.5); transform-origin: 0 0">
    <Resizable defaultSize={{ width: '60%', height: '60%' }} scale={0.5} style="background-color: var(--semi-grey-1)">
        <div style="margin-left: 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

<script lang="ts">
    import { Resizable } from '@fibrae/semi-ui-svelte';
</script>

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

Customizing Corner Handler Styles

You can customize the drag handle content for each direction with the handle snippet. It renders once for each enabled direction, and its argument { direction } is that handle's direction, so render the content for the direction you want. A direction that renders nothing keeps its handle element. Apply different styles with handleStyle and handleClass; the style values are strings.

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

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

right

Code

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

<div style="width: 500px; height: 60%">
    <Resizable defaultSize={{ width: '60%', height: 300 }} style="margin-left: 20%; background-color: var(--semi-grey-1); border: var(--semi-color-border) 1px solid">
        <div style="margin-left: 20%">right</div>
        {#snippet handle({ direction })}
            {#if direction === 'right'}
                <div style="height: 100%; display: flex; align-items: center; width: fit-content">
                    <IconTransfer />
                </div>
            {/if}
        {/snippet}
    </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

<script lang="ts">
    import { Resizable } from '@fibrae/semi-ui-svelte';
</script>

<div style="width: 500px; height: 60%">
    <Resizable defaultSize={{ width: '60%', height: 300 }} grid={[100, 100]} snapGap={20} style="margin-left: 20%; background-color: var(--semi-grey-1); border: var(--semi-color-border) 1px solid">
        <div style="margin-left: 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.

onResizeStart, onChange and onResizeEnd of ResizeItem are callback props as well.

Drag to resize min:10%

Drag to resize min:10% max:30%

Drag to resize

Code

<script lang="ts">
    import { ResizeGroup, ResizeHandler, ResizeItem } from '@fibrae/semi-ui-svelte';

    let text = $state('Drag to resize');
    const itemStyle = 'background-color: var(--semi-grey-1); border: var(--semi-color-border) 1px solid';
</script>

<div style="width: 1000px; height: 100px">
    <ResizeGroup direction="horizontal">
        <ResizeItem defaultSize="400px" min="10%" onChange={() => (text = 'resizing')} onResizeEnd={() => (text = 'Drag to resize')} style={itemStyle}>
            <div style="margin-left: 20%">{text + ' min:10%'}</div>
        </ResizeItem>
        <ResizeHandler />
        <ResizeItem defaultSize="20%" max="30%" min="10%" onChange={() => (text = 'resizing')} style={itemStyle}>
            <div style="margin-left: 20%">{text + ' min:10% max:30%'}</div>
        </ResizeItem>
        <ResizeHandler />
        <ResizeItem defaultSize="0.5" onChange={() => (text = 'resizing')} style={itemStyle}>
            <div style="margin-left: 20%">{text}</div>
        </ResizeItem>
        <ResizeHandler />
        <ResizeItem defaultSize={1} onChange={() => (text = 'resizing')} style={itemStyle}>
            <div style="margin-left: 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

<script lang="ts">
    import { ResizeGroup, ResizeHandler, ResizeItem, Toast } from '@fibrae/semi-ui-svelte';

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

    const onResizeStart = () => {
        Toast.info(opts_1);
    };

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

<div style="width: 1000px; height: 600px">
    <ResizeGroup direction="vertical">
        <ResizeItem defaultSize="20%" onChange={() => (text = 'resizing')} {onResizeEnd} {onResizeStart} style="background-color: var(--semi-grey-1)">
            <div style="margin-left: 20%">header</div>
        </ResizeItem>
        <ResizeHandler />
        <ResizeItem defaultSize="80%" onChange={() => (text = 'resizing')}>
            <ResizeGroup direction="horizontal">
                <ResizeItem defaultSize="25%" onChange={() => (text = 'resizing')} {onResizeEnd} {onResizeStart} style={itemStyle}>
                    <div style="margin-left: 20%">tab</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem defaultSize="75%" onChange={() => (text = 'resizing')} style={itemStyle}>
                    <div style="margin-left: 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

<script lang="ts">
    import { ResizeGroup, ResizeHandler, ResizeItem } from '@fibrae/semi-ui-svelte';

    let text = $state('Drag to resize');
    const itemStyle = 'background-color: var(--semi-grey-1); border: var(--semi-color-border) 1px solid';
    const borderStyle = 'border: var(--semi-color-border) 1px solid';
</script>

<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="margin-left: 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%" onChange={() => (text = 'resizing')} onResizeEnd={() => (text = 'Drag to resize')} style={itemStyle}>
                                <div style="margin-left: 20%">{text + ' min:10%'}</div>
                            </ResizeItem>
                            <ResizeHandler />
                            <ResizeItem defaultSize="33%" max="40%" min="10%" style={itemStyle}>
                                <div style="margin-left: 20%">{text + ' min:10% max:40%'}</div>
                            </ResizeItem>
                            <ResizeHandler />
                            <ResizeItem style={itemStyle}>
                                <div style="margin-left: 20%">{text}</div>
                            </ResizeItem>
                        </ResizeGroup>
                    </div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem defaultSize="1" max="30%" style={itemStyle}>
                    <div style="margin-left: 20%">{text + ' max:30%'}</div>
                </ResizeItem>
            </ResizeGroup>
        </ResizeItem>
        <ResizeHandler />
        <ResizeItem defaultSize="20%" onChange={() => (text = 'resizing')}>
            <ResizeGroup direction="horizontal">
                <ResizeItem defaultSize="50%" style={itemStyle}>
                    <div style="margin-left: 20%">tab</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem defaultSize="50%" style={itemStyle}>
                    <div style="margin-left: 20%">content</div>
                </ResizeItem>
            </ResizeGroup>
        </ResizeItem>
    </ResizeGroup>
</div>

Dynamic Direction

drag to resize

Code

<script lang="ts">
    import { Button, ResizeGroup, ResizeHandler, ResizeItem } from '@fibrae/semi-ui-svelte';

    let text = $state('drag to resize');
    let direction = $state<'horizontal' | 'vertical'>('horizontal');
    const itemStyle = 'background-color: var(--semi-grey-1)';
    const contentStyle = 'margin-left: 20%; padding: 5px';

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

<div style="width: 400px; height: 300px">
    <Button onclick={changeDirection}>{direction}</Button>
    <ResizeGroup {direction}>
        <ResizeItem defaultSize={5} onChange={() => (text = 'resizing')} onResizeEnd={() => (text = 'drag to resize')}>
            <ResizeGroup direction="horizontal">
                <ResizeItem onChange={() => (text = 'resizing')} onResizeEnd={() => (text = 'drag to resize')} style={itemStyle}>
                    <div style={contentStyle}>{text}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem onChange={() => (text = 'resizing')} style={itemStyle}>
                    <div style={contentStyle}>{text}</div>
                </ResizeItem>
            </ResizeGroup>
        </ResizeItem>
        <ResizeHandler />
        <ResizeItem defaultSize={1.3} onChange={() => (text = 'resizing')} style={itemStyle}>
            <div style={contentStyle}>{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 resizable box.	`Snippet`	-
defaultSize	Initial width and height, as a number or a string (px/vw/vh/%). It is also the fallback of an axis that `size` leaves unset.	`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]`
handle	Snippet for the content of the handle in each enabled direction. It renders once per enabled direction, with `{ direction }` set to that handle's direction.	`Type`	-
handleClass	Class names of the handle in each direction.	`HandleClassName`	-
handleStyle	Styles of the handle in each direction, as style strings.	`HandleStyle`	-
handleWrapperClass	Class name of the element that wraps all handles.	`string`	-
handleWrapperStyle	Style string of the element that wraps all handles.	`string`	-
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.	`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`
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. A one-way prop that cannot be bound with `bind:size`: write the new size back in `onChange`.	`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`

class, style (a string) and native attributes 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
children	ResizeItem and ResizeHandler children, which register themselves with the group once mounted.	`Snippet`	-
direction	Resize direction within the group: horizontal lays items side by side, vertical stacks them.	`'horizontal' \| 'vertical'`	`"horizontal"`

class, style (a string) and native attributes land on the root element. flex-direction is always decided by direction.

ResizeHandler

Props

Property	Description	Type	Default
children	Replaces the default grip icon.	`Snippet`	-

class, style (a string) and native attributes land on the handle element; an aria-label you pass overrides the locale name.

ResizeItem

Props

Property	Description	Type	Default
children	Content of the item.	`Snippet`	-
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 handler returns false, the resize is cancelled.	`ResizeStartCallback`	-

class, style and native attributes land on the root element. ResizeGroup writes the size straight onto the element's style.width and style.height, and a Svelte style can only be a string, which is written again whole when it changes and drops the size, so keep style a constant value.

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