Apq/semi-design: 快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 @ fix_jsonViewer_empty_line

localeCode: en-US order: 17 category: Basic title: Resizable icon: doc-steps dir: column showNew: true

brief: The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing.

Demos

How to import

Resizable supported from 2.69.0

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

Single Component

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

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

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  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: 'rgba(var(--semi-grey-1), 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.

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

import React, { useState } from 'react';
import { Resizable, Switch, Typography } from '@douyinfe/semi-ui';

function Demo() {
  const [b, setB] = useState(false)
  const { Title } = Typography;
  return (
    <div style={{ width: '500px', height: '60%' }}>
        <div style={{ display: 'flex', alignItems: 'center', margin: 8 }}>
          <Switch checked={b} onChange={setB}></Switch>
            <Title heading={6} style={{ margin: 8 }}>
                {b ? 'able' : 'disable'}
            </Title>
        </div>
      <Resizable
        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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.

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  return (
    <div style={{ width: '500px', height: '60%' }}>
      <Resizable
        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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.

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  return (
    <div style={{ width: '500px', height: '60%' }}>
      <Resizable
        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginBottom: '10px' }}
        defaultSize={{
          width: 400,
          height: 300,
        }}
        lockAspectRatio
      >
        <div style={{ marginLeft: '20%' }}>
          lock
        </div>
      </Resizable>
      <Resizable
        style={{backgroundColor: 'rgba(var(--semi-grey-1), 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.

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  return (
    <div style={{ width: '500px', height: '60%' }}>
      <Resizable
        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}
        maxWidth={200}
        maxHeight={300}
        minWidth={50}
        minHeight={50}
        defaultSize={{
          width: 100,
          height: 100,
        }}
      >
        <div style={{ marginLeft: '20%' }}>
          width is between 50 and 200, height is between 50 and 300
        </div>
      </Resizable>
    </div>
  );
}

Control Width/Height

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

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  const [size, setSize] = useState({ width: 200, height: 100 });
  const onButtonClick = (() => {
    let realSize = { width: size.width + 10, height: size.height + 10 };
    setSize(realSize);
  })
  const onChange = (s) => { setSize(s); }

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

Setting Scale

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

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  return (
    <div style={{ width: '500px', height: '60%', transform: 'scale(0.5)', transformOrigin: '0 0' }}>
      <Resizable
        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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 string values like 'parent' or 'window'.

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
  return (
    <div style={{ width: '300px', height: '300px', border: 'var(--semi-color-border) 1px solid' }}>
      <Resizable
        style={{ marginLeft: '20%', backgroundColor: 'rgba(var(--semi-grey-1), 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 handleClassName.

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

import React, { useState } from 'react';
import { Resizable, Button } from '@douyinfe/semi-ui';
function Demo() {
    return (
    <div style={{ width: '500px', height: '60%' }}>
      <Resizable
        style={{ marginLeft: '20%', backgroundColor: 'rgba(var(--semi-grey-1), 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[];
}

import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

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

Group Component

The parent element of ResizeGroup needs to have a size in the main axis direction. It's best not to set padding for ResizeItem, as it may cause the minimum size to not match the expected value. You can set padding for child elements instead.

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

import React, { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup, Toast } from '@douyinfe/semi-ui';

function Demo() {
  const [text, setText] = useState('Drag to resize')
  return (
    <div style={{ width: '1000px', height: '100px' }}>
      <ResizeGroup direction='horizontal'>
        <ResizeItem
          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
        <ResizeItem
          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
        <ResizeItem
          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}
          defaultSize={'0.5'}
          onChange={() => { setText('resizing') }}
        >
          <div style={{ marginLeft: '20%' }}>
            {text}
          </div>
        </ResizeItem>
        <ResizeHandler></ResizeHandler>
        <ResizeItem
          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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.

import React, { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';

function Demo() {
  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: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
        <ResizeItem
          defaultSize={"80%"}
          onChange={() => { setText('resizing') }}
        >
          <ResizeGroup direction='horizontal'>
            <ResizeItem
              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
            <ResizeItem
              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}
              defaultSize={"75%"}
              onChange={() => { setText('resizing') }}
            >
              <div style={{ marginLeft: '20%' }}>
                {text}
              </div>
            </ResizeItem>
            
          </ResizeGroup>
        </ResizeItem>
      </ResizeGroup>
    </div>
  );
}

import React, { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';

function Demo() {
  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
          defaultSize={"80%"}
        >
          <ResizeGroup direction='horizontal'>
            <ResizeItem
              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
            <ResizeItem
              style={{ border: 'var(--semi-color-border) 1px solid' }}
              defaultSize={"50%"}
            >
              <div style={{ height: '100%' }}>
                <ResizeGroup direction='vertical'>
                  <ResizeItem
                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
                  <ResizeItem
                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 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></ResizeHandler>
                  <ResizeItem
                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}
                  >
                    <div style={{ marginLeft: '20%' }}>
                      {text}
                    </div>
                  </ResizeItem>
                </ResizeGroup>
              </div>
            </ResizeItem>
            <ResizeHandler></ResizeHandler>
            <ResizeItem
              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}
              defaultSize={"1"}
              max={'30%'}
            >
              <div style={{ marginLeft: '20%' }}>
                {text + ' max:30%'}
              </div>
            </ResizeItem>
            
          </ResizeGroup>
        </ResizeItem>
        <ResizeHandler></ResizeHandler>
        <ResizeItem
          defaultSize={"20%"}
          onChange={() => { setText('resizing') }}
        >
          <ResizeGroup direction='horizontal'>
            <ResizeItem
              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}
              defaultSize={"50%"}
            >
              <div style={{ marginLeft: '20%' }}>
                {'tab'}
              </div>
            </ResizeItem>
            <ResizeHandler></ResizeHandler>
            <ResizeItem
              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}
              defaultSize={"50%"}
            >
              <div style={{ marginLeft: '20%' }}>
                {'content'}
              </div>
            </ResizeItem>
          </ResizeGroup>
        </ResizeItem>
      </ResizeGroup>
    </div>
  );
}

Dynamic Direction

import React, { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';

function Demo() {
  const [text, setText] = useState('drag to resize')
  const [direction, setDirection] = useState('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: 'rgba(var(--semi-grey-1), 1)', }}
                onChange={() => { setText('resizing') }}
                onResizeEnd={() => { setText('drag to resize') }}
              >
                <div style={{ marginLeft: '20%',  padding:'5px' }}>
                  {text}
                </div>
              </ResizeItem>
              <ResizeHandler></ResizeHandler>
              <ResizeItem
                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}
                onChange={() => { setText('resizing') }}
              >
                <div style={{ marginLeft: '20%',  padding:'5px' }}>
                  {text}
                </div>
              </ResizeItem>
            </ResizeGroup>
        </ResizeItem>
        <ResizeHandler></ResizeHandler>
        <ResizeItem
          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)',  }}
          defaultSize={1.3}
          onChange={() => { setText('resizing') }}
        >
          <div style={{ marginLeft: '20%',  padding:'5px' }}>
            {text}
          </div>
        </ResizeItem>
      </ResizeGroup>
    </div>
  );
}

API

Resizable

参数	说明	类型	默认值
className	ClassName	string
size	Controls the size of the resizable box, supports both numeric and string (px/vw/vh/%) formats	Size
defaultSize	Sets the initial width and height, supports both numeric and string (px/vw/vh/%) formats	Size
minWidth	Specifies the minimum width of the resizable box	string \| number
maxWidth	Specifies the maximum width of the resizable box	string \| number
minHeight	Specifies the minimum height of the resizable box	string \| number
maxHeight	Specifies the maximum height of the resizable box	string \| number
lockAspectRatio	Locks the aspect ratio of the resizable box when true, using the initial width and height as the ratio	boolean \| number
enable	Specifies the directions in which the resizable box can be resized. If not set, all directions are enabled by default	Enable
scale	The scale ratio of the resizable element	number	1
boundElement	Restricts the size of the resizable element within a specific element. Pass "parent" to set the parent element as the bounding element	string
handleNode	Custom nodes for the drag handles in each direction	HandleNode
handleStyle	Styles for the drag handles in each direction	HandleNode
handleClass	Class names for the drag handles in each direction	HandleNode
style	Style	CSSProperties
snapGap	Specifies the minimum gap required to snap to the next target	number	0
snap	Specifies the pixel values to snap to during resizing. Both x and y are optional, allowing the definition of specific axes only	Snap	null
grid	Specifies the increment to align to when resizing	[number, number]	[1,1]
onChange	Callback during the dragging process	(size: Size; e: Event; direction: String) => void	-
onResizeStart	Callback when resizing starts	(e: Event; direction: String) => void	-
onResizeEnd	Callback when resizing ends	(size: Size; e: Event; direction: String) => void	-

ResizeGroup

参数	说明	类型	默认值	版本
className	ClassName	string
direction	Specifies the resize direction within the group	'horizontal' \| 'vertical'	'horizontal'

ResizeHandler

参数	说明	类型	默认值	版本
className	ClassName	string
style	Style	CSSProperties

ResizeItem

参数	说明	类型	默认值
className	ClassName	string
defaultSize	Used to set the initial width and height. The string supports % and px units, and when the string is a pure number or a number is set directly, it represents the proportional allocation of the remaining space based on the value.	string \| number
min	Specifies the minimum size of the resizable box (as percentage or pixel)	string
max	Specifies the maximum size of the resizable box (as percentage or pixel)	string
style	Style	CSSProperties
onChange	Callback during the dragging process	(size: Size; e: Event; direction: String) => void	-
onResizeStart	Callback when resizing starts	(e: Event; direction: String) => void	-
onResizeEnd	Callback when resizing ends	(size: Size; e: Event; direction: String) => void	-

index-en-US.md 27 KB

Permalänk Historik Rå

brief: The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing.

Demos

How to import

Single Component

Controlling Resize Directions

Setting Resizing Ratio

Locking Aspect Ratio

Setting Maximum and Minimum Width/Height

Control Width/Height

Setting Scale

Restricting Width/Height by an Element

Customizing Corner Handler Styles

Allowing Incremental Width and Height Adjustment

Group Component

Nested

Dynamic Direction

API

Resizable

ResizeGroup

ResizeHandler

ResizeItem

Design Tokens

index-en-US.md 27 KB Permalänk Historik Rå

brief: The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing.

Demos

How to import

Single Component

Controlling Resize Directions

Setting Resizing Ratio

Locking Aspect Ratio

Setting Maximum and Minimum Width/Height

Control Width/Height

Setting Scale

Restricting Width/Height by an Element

Customizing Corner Handler Styles

Allowing Incremental Width and Height Adjustment

Group Component

Nested

Dynamic Direction

API

Resizable

ResizeGroup

ResizeHandler

ResizeItem

Design Tokens

index-en-US.md 27 KB

Permalänk Historik Rå