Resizable

Demos

How to import

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

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 { createSignal } from 'solid-js';
import { Resizable, Toast } from '@fibrous/semi-ui-solid';

const startToast = {
    content: 'resize start',
    duration: 1,
    stack: true,
};

const endToast = {
    content: 'resize end',
    duration: 1,
    stack: true,
};

export default function ResizableDemo() {
    const [text, setText] = createSignal('Drag edge to resize');
    return (
        <div style={{ width: '500px' }}>
            <Resizable
                style={{ 'background-color': 'var(--semi-grey-1)' }}
                defaultSize={{
                    width: '60%',
                    height: 300,
                }}
                onChange={() => {
                    setText('resizing');
                }}
                onResizeStart={() => {
                    Toast.info(startToast);
                }}
                onResizeEnd={() => {
                    Toast.info(endToast);
                    setText('Drag edge to resize');
                }}
            >
                <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

import { createSignal } from 'solid-js';
import { Resizable, Switch, Typography } from '@fibrous/semi-ui-solid';

export default function ResizableDemo() {
    const [b, setB] = createSignal(false);
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <div style={{ display: 'flex', 'align-items': 'center', margin: '8px' }}>
                <Switch aria-labelledby="resizable-enable-state" checked={b()} onChange={(checked) => setB(checked)} />
                <Typography.Title id="resizable-enable-state" heading={6} style={{ margin: '8px' }}>
                    {b() ? 'able' : 'disable'}
                </Typography.Title>
            </div>
            <Resizable
                style={{ 'background-color': 'var(--semi-grey-1)' }}
                enable={{
                    left: b(),
                }}
                defaultSize={{
                    width: 200,
                    height: 200,
                }}
            >
                <div style={{ 'margin-left': '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-solid';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{ 'background-color': 'var(--semi-grey-1)' }}
                ratio={2}
                defaultSize={{
                    width: 200,
                    height: 200,
                }}
            >
                <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

import { Resizable } from '@fibrous/semi-ui-solid';

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

import { Resizable } from '@fibrous/semi-ui-solid';

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

While dragging, write the new size back to the signal behind size in onChange; otherwise the size stays at the value of size.

受控

Code

import { createSignal } from 'solid-js';
import { Button, Resizable, type ResizableProps } from '@fibrous/semi-ui-solid';

type Size = NonNullable<ResizableProps['size']>;

export default function ResizableDemo() {
    const [size, setSize] = createSignal<Size>({ width: 200, height: 100 });
    const onButtonClick = () => {
        const current = size();
        setSize({ width: Number(current.width) + 10, height: Number(current.height) + 10 });
    };

    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Button onClick={onButtonClick}>set += 10</Button>
            <Resizable style={{ 'background-color': 'var(--semi-grey-1)', 'margin-top': '10px' }} size={size()} onChange={(next) => setSize(next)}>
                <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

import { Resizable } from '@fibrous/semi-ui-solid';

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

import { Resizable } from '@fibrous/semi-ui-solid';

export default function ResizableDemo() {
    return (
        <div style={{ width: '300px', height: '300px', border: 'var(--semi-color-border) 1px solid' }}>
            <Resizable
                style={{ 'margin-left': '20%', 'background-color': 'var(--semi-grey-1)' }}
                defaultSize={{
                    width: '60%',
                    height: 200,
                }}
                boundElement="parent"
            >
                <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 renderHandle. It is called once for each enabled direction with that handle's direction, so return the content for the direction you want. A direction that returns nothing keeps its handle element. Use handleStyle and handleClass to set styles per direction; a style can be an object or a string.

type RenderHandle = (direction: Direction) => JSX.Element;

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

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-solid/lab';
import { Resizable } from '@fibrous/semi-ui-solid';

export default function ResizableDemo() {
    return (
        <div style={{ width: '500px', height: '60%' }}>
            <Resizable
                style={{
                    'margin-left': '20%',
                    'background-color': 'var(--semi-grey-1)',
                    border: 'var(--semi-color-border) 1px solid',
                }}
                defaultSize={{
                    width: '60%',
                    height: 300,
                }}
                renderHandle={(direction) =>
                    direction === 'right' ? (
                        <div
                            style={{
                                height: '100%',
                                display: 'flex',
                                'align-items': 'center',
                                width: 'fit-content',
                            }}
                        >
                            <IconTransfer />
                        </div>
                    ) : undefined
                }
            >
                <div style={{ 'margin-left': '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-solid';

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

Drag to resize min:10%

Drag to resize min:10% max:30%

Drag to resize

Code

import { createSignal } from 'solid-js';
import { ResizeGroup, ResizeHandler, ResizeItem } from '@fibrous/semi-ui-solid';

const boxStyle = {
    'background-color': 'var(--semi-grey-1)',
    border: 'var(--semi-color-border) 1px solid',
};

const textStyle = {
    'margin-left': '20%',
};

export default function ResizableDemo() {
    const [text, setText] = createSignal('Drag to resize');
    return (
        <div style={{ width: '1000px', height: '100px' }}>
            <ResizeGroup direction="horizontal">
                <ResizeItem
                    style={boxStyle}
                    defaultSize="400px"
                    min="10%"
                    onChange={() => {
                        setText('resizing');
                    }}
                    onResizeEnd={() => {
                        setText('Drag to resize');
                    }}
                >
                    <div style={textStyle}>{text() + ' min:10%'}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={boxStyle}
                    defaultSize="20%"
                    min="10%"
                    max="30%"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={textStyle}>{text() + ' min:10% max:30%'}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={boxStyle}
                    defaultSize="0.5"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={textStyle}>{text()}</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={boxStyle}
                    defaultSize={1}
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={textStyle}>{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 { createSignal } from 'solid-js';
import { ResizeGroup, ResizeHandler, ResizeItem, Toast } from '@fibrous/semi-ui-solid';

const boxStyle = {
    'background-color': 'var(--semi-grey-1)',
    border: 'var(--semi-color-border) 1px solid',
};

const textStyle = {
    'margin-left': '20%',
};

const startToast = {
    content: 'resize start',
    duration: 1,
    stack: true,
};

const endToast = {
    content: 'resize end',
    duration: 1,
    stack: true,
};

export default function ResizableDemo() {
    const [text, setText] = createSignal('Drag to resize');
    return (
        <div style={{ width: '1000px', height: '600px' }}>
            <ResizeGroup direction="vertical">
                <ResizeItem
                    style={{ 'background-color': 'var(--semi-grey-1)' }}
                    defaultSize="20%"
                    onChange={() => {
                        setText('resizing');
                    }}
                    onResizeStart={() => {
                        Toast.info(startToast);
                    }}
                    onResizeEnd={() => {
                        Toast.info(endToast);
                        setText('Drag to resize');
                    }}
                >
                    <div style={textStyle}>header</div>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    defaultSize="80%"
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <ResizeGroup direction="horizontal">
                        <ResizeItem
                            style={boxStyle}
                            defaultSize="25%"
                            onChange={() => {
                                setText('resizing');
                            }}
                            onResizeStart={() => {
                                Toast.info(startToast);
                            }}
                            onResizeEnd={() => {
                                Toast.info(endToast);
                                setText('Drag to resize');
                            }}
                        >
                            <div style={textStyle}>tab</div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem
                            style={boxStyle}
                            defaultSize="75%"
                            onChange={() => {
                                setText('resizing');
                            }}
                        >
                            <div style={textStyle}>{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 { createSignal } from 'solid-js';
import { ResizeGroup, ResizeHandler, ResizeItem } from '@fibrous/semi-ui-solid';

const boxStyle = {
    'background-color': 'var(--semi-grey-1)',
    border: 'var(--semi-color-border) 1px solid',
};

const frameStyle = {
    border: 'var(--semi-color-border) 1px solid',
};

const textStyle = {
    'margin-left': '20%',
};

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

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

Dynamic Direction

drag to resize

Code

import { createSignal } from 'solid-js';
import { Button, ResizeGroup, ResizeHandler, ResizeItem } from '@fibrous/semi-ui-solid';

const boxStyle = {
    'background-color': 'var(--semi-grey-1)',
};

const textStyle = {
    'margin-left': '20%',
    padding: '5px',
};

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

    const changeDirection = () => {
        setDirection(direction() === 'horizontal' ? 'vertical' : '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={boxStyle}
                            onChange={() => {
                                setText('resizing');
                            }}
                            onResizeEnd={() => {
                                setText('drag to resize');
                            }}
                        >
                            <div style={textStyle}>{text()}</div>
                        </ResizeItem>
                        <ResizeHandler />
                        <ResizeItem
                            style={boxStyle}
                            onChange={() => {
                                setText('resizing');
                            }}
                        >
                            <div style={textStyle}>{text()}</div>
                        </ResizeItem>
                    </ResizeGroup>
                </ResizeItem>
                <ResizeHandler />
                <ResizeItem
                    style={boxStyle}
                    defaultSize={1.3}
                    onChange={() => {
                        setText('resizing');
                    }}
                >
                    <div style={textStyle}>{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`	-
defaultSize	Initial width and height, as a number or a string (px/vw/vh/%).	`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 handle in each direction.	`HandleClassName`	-
handleStyle	Styles of the handle in each direction, as objects or strings.	`HandleStyle`	-
handleWrapperClass	Class name of the element that wraps all handles.	`string`	-
handleWrapperStyle	Style of the element that wraps all handles.	`JSX.CSSProperties \| 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 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`
renderHandle	Content of the handle in each enabled direction, in place of the default grip icon. It is called once per enabled direction, with that handle's direction.	`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`

class, style, ref and native attributes are passed in through rest 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 or vertical.	`'horizontal' \| 'vertical'`	`"horizontal"`

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

ResizeHandler

The content that replaces the default grip icon is passed in through children. class, style and native attributes are passed in through rest and land on the handle element. An aria-label you pass wins over the locale name, and the pointer and key callbacks you pass run alongside the component's own.

ResizeItem

Props

Property	Description	Type	Default
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 are passed in through rest 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: a string style is written again whole when it changes, which drops the size.

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