{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/resizable","result":{"data":{"current":{"frontmatter":{"title":"Resizable","order":21,"brief":"The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing.","icon":"doc-steps"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#single-component","title":"Single Component"},{"url":"#controlling-resize-directions","title":"Controlling Resize Directions"},{"url":"#setting-resizing-ratio","title":"Setting Resizing Ratio"},{"url":"#locking-aspect-ratio","title":"Locking Aspect Ratio"},{"url":"#setting-maximum-and-minimum-widthheight","title":"Setting Maximum and Minimum Width/Height"},{"url":"#control-widthheight","title":"Control Width/Height"},{"url":"#setting-scale","title":"Setting Scale"},{"url":"#restricting-widthheight-by-an-element","title":"Restricting Width/Height by an Element"},{"url":"#customizing-corner-handler-styles","title":"Customizing Corner Handler Styles"},{"url":"#allowing-incremental-width-and-height-adjustment","title":"Allowing Incremental Width and Height Adjustment"},{"url":"#group-component","title":"Group Component"},{"url":"#nested","title":"Nested"},{"url":"#dynamic-direction","title":"Dynamic Direction"}]},{"url":"#api","title":"API","items":[{"url":"#resizable","title":"Resizable"},{"url":"#resizegroup","title":"ResizeGroup"},{"url":"#resizehandler","title":"ResizeHandler"},{"url":"#resizeitem","title":"ResizeItem"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 21,\n  \"category\": \"Basic\",\n  \"title\": \"Resizable\",\n  \"icon\": \"doc-steps\",\n  \"dir\": \"column\",\n  \"brief\": \"The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Resizable supported from 2.69.0\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Resizable } from '@douyinfe/semi-ui';\\nimport { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Single Component\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Basic Usage and Callbacks\\nYou can set the initial size using defaultSize, and set drag callbacks with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onResizeStart\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onResize\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onResizeEnd\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx\"\n  }, \"interface Size {\\n    width: string | number;\\n    height: string | number;\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [text, setText] = useState('Drag edge to resize')\\n  const opts_1 = {\\n    content: 'resize start',\\n    duration: 1,\\n    stack: true,\\n  };\\n  const opts_2 = {\\n    content: 'resize end',\\n    duration: 1,\\n    stack: true,\\n  };\\n  return (\\n    <div style={{ width: '500px' }}>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n        defaultSize={{\\n          width: '60%',\\n          height: 300,\\n        }}\\n        onChange={() => { setText('resizing') }}\\n        onResizeStart={() => Toast.info(opts_1)}\\n        onResizeEnd={() => { Toast.info(opts_2); setText('Drag edge to resize') }}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          {text}\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Controlling Resize Directions\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can enable or disable specific resizing directions by setting the value of enable. All directions are enabled by default.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx\"\n  }, \"interface Enable {\\n  left: Boolean;\\n  right: Boolean;\\n  top: Boolean;\\n  bottom: Boolean;\\n  topLeft: Boolean;\\n  topRight: Boolean;\\n  bottomLeft: Boolean;\\n  bottomRight: Boolean;\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable, Switch, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [b, setB] = useState(false)\\n  const { Title } = Typography;\\n  return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n        <div style={{ display: 'flex', alignItems: 'center', margin: 8 }}>\\n          <Switch checked={b} onChange={setB}></Switch>\\n            <Title heading={6} style={{ margin: 8 }}>\\n                {b ? 'able' : 'disable'}\\n            </Title>\\n        </div>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n        enable={{\\n          left: b\\n        }}\\n        defaultSize={{\\n          width: 200,\\n          height: 200,\\n        }}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          {'enable.left:' + b}\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Setting Resizing Ratio\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set the drag and resize ratio using ratio.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n        ratio={2}\\n        defaultSize={{\\n          width: 200,\\n          height: 200,\\n        }}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          ratio=2\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Locking Aspect Ratio\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"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.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginBottom: '10px' }}\\n        defaultSize={{\\n          width: 400,\\n          height: 300,\\n        }}\\n        lockAspectRatio\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          lock\\n        </div>\\n      </Resizable>\\n      <Resizable\\n        style={{backgroundColor: 'rgba(var(--semi-grey-1), 1)'}}\\n        defaultSize={{\\n          width: 200,\\n          height: 200 * 9 / 16,\\n        }}\\n        lockAspectRatio={16 / 9}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          16 / 9\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Setting Maximum and Minimum Width/Height\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set the maximum and minimum width and height using maxHeight, maxWidth, minHeight, and minWidth.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n        maxWidth={200}\\n        maxHeight={300}\\n        minWidth={50}\\n        minHeight={50}\\n        defaultSize={{\\n          width: 100,\\n          height: 100,\\n        }}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          width is between 50 and 200, height is between 50 and 300\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Control Width/Height\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can control the size of the element through the size prop.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [size, setSize] = useState({ width: 200, height: 100 });\\n  const onButtonClick = (() => {\\n    let realSize = { width: size.width + 10, height: size.height + 10 };\\n    setSize(realSize);\\n  })\\n  const onChange = (s) => { setSize(s); }\\n\\n  return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n      <Button onClick={onButtonClick}>set += 10</Button>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}\\n        size={size}\\n        onChange={onChange}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          Control Width/Height\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Setting Scale\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can scale the entire element by setting the scale prop.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <div style={{ width: '500px', height: '60%', transform: 'scale(0.5)', transformOrigin: '0 0' }}>\\n      <Resizable\\n        style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n        defaultSize={{\\n          width: '60%',\\n          height: '60%',\\n        }}\\n        scale={0.5}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          scale 0.5\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Restricting Width/Height by an Element\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can restrict the width and height by setting the boundElement, which supports string values like 'parent' or 'window'.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <div style={{ width: '300px', height: '300px', border: 'var(--semi-color-border) 1px solid' }}>\\n      <Resizable\\n        style={{ marginLeft: '20%', backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n        defaultSize={{\\n          width: '60%',\\n          height: 200,\\n        }}\\n        boundElement={'parent'}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          bound\\uFF1Aparent\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Customizing Corner Handler Styles\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can customize the drag handles for each direction using handleNode, and apply different styles using handleStyle and handleClassName.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"type HandleNode = {\\n  left: ReactNode;\\n  right: ReactNode;\\n  top: ReactNode;\\n  bottom: ReactNode;\\n  topLeft: ReactNode;\\n  topRight: ReactNode;\\n  bottomLeft: ReactNode;\\n  bottomRight: ReactNode;\\n}\\n\\ntype HandleStyle = {\\n  left: React.CSSProperties;\\n  right: React.CSSProperties;\\n  top: React.CSSProperties;\\n  bottom: React.CSSProperties;\\n  topLeft: React.CSSProperties;\\n  topRight: React.CSSProperties;\\n  bottomLeft: React.CSSProperties;\\n  bottomRight: React.CSSProperties;\\n}\\n\\ntype HandleClass = {\\n  left: string;\\n  right: string;\\n  top: string;\\n  bottom: string;\\n  topLeft: string;\\n  topRight: string;\\n  bottomLeft: string;\\n  bottomRight: string;\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable, Button } from '@douyinfe/semi-ui';\\nfunction Demo() {\\n    return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n      <Resizable\\n        style={{ marginLeft: '20%', backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n        defaultSize={{\\n          width: '60%',\\n          height: 300,\\n        }}\\n        handleNode={{\\n          right: <div style={{\\n            height: '100%',\\n            display: 'flex',\\n            alignItems: 'center',\\n            width: 'fit-content',\\n          }}><IconTransfer /></div>\\n        }}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          right\\n        </div>\\n      </Resizable>\\n    </div>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Allowing Incremental Width and Height Adjustment\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"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.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx\"\n  }, \"interface Snap {\\n    x: number[];\\n    y: number[];\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Resizable } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <div style={{ width: '500px', height: '60%' }}>\\n      <Resizable\\n        style={{ marginLeft: '20%', backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n        defaultSize={{\\n          width: '60%',\\n          height: 300,\\n        }}\\n        grid={100}\\n        snapGap={20}\\n      >\\n        <div style={{ marginLeft: '20%' }}>\\n          snap\\n        </div>\\n      </Resizable>\\n    </div >\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Group Component\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"notice\",\n    mdxType: \"Notice\"\n  }, \"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.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use the direction prop to set the resizing direction. Options are \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"horizontal\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \". Supports \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onResizeStart\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onResize\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onResizeEnd\"), \" callbacks, as well as setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"min\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"max\"), \" to control the maximum and minimum width/height.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { ResizeItem, ResizeHandler, ResizeGroup, Toast } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [text, setText] = useState('Drag to resize')\\n  return (\\n    <div style={{ width: '1000px', height: '100px' }}>\\n      <ResizeGroup direction='horizontal'>\\n        <ResizeItem\\n          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n          defaultSize={'400px'}\\n          min={'10%'}\\n          onChange={() => { setText('resizing') }}\\n          onResizeEnd={() => { setText('Drag to resize') }}\\n        >\\n          <div style={{ marginLeft: '20%' }}>\\n            {text + \\\" min:10%\\\"}\\n          </div>\\n        </ResizeItem>\\n        <ResizeHandler></ResizeHandler>\\n        <ResizeItem\\n          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n          defaultSize={'20%'}\\n          min={'10%'}\\n          max={'30%'}\\n          onChange={() => { setText('resizing') }}\\n        >\\n          <div style={{ marginLeft: '20%' }}>\\n            {text + \\\" min:10% max:30%\\\"}\\n          </div>\\n        </ResizeItem>\\n        <ResizeHandler></ResizeHandler>\\n        <ResizeItem\\n          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n          defaultSize={'0.5'}\\n          onChange={() => { setText('resizing') }}\\n        >\\n          <div style={{ marginLeft: '20%' }}>\\n            {text}\\n          </div>\\n        </ResizeItem>\\n        <ResizeHandler></ResizeHandler>\\n        <ResizeItem\\n          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n          defaultSize={1}\\n          onChange={() => { setText('resizing') }}\\n        >\\n          <div style={{ marginLeft: '20%' }}>\\n            {text}\\n          </div>\\n        </ResizeItem>\\n      </ResizeGroup>\\n    </div>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nested\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set the resizing direction using the direction prop. Options are horizontal and vertical.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [text, setText] = useState('Drag to resize')\\n  const opts_1 = {\\n    content: 'resize start',\\n    duration: 1,\\n    stack: true,\\n  };\\n  const opts = {\\n    content: 'resize end',\\n    duration: 1,\\n    stack: true,\\n  };\\n  return (\\n    <div style={{ width: '1000px', height: '600px' }}>\\n      <ResizeGroup direction='vertical'>\\n        <ResizeItem\\n          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)' }}\\n          defaultSize={\\\"20%\\\"}\\n          onChange={() => { setText('resizing') }}\\n          onResizeStart={() => Toast.info(opts_1)}\\n          onResizeEnd={() => { Toast.info(opts); setText('Drag to resize') }}\\n        >\\n          <div style={{ marginLeft: '20%' }}>\\n            {'header'}\\n          </div>\\n        </ResizeItem>\\n        <ResizeHandler></ResizeHandler>\\n        <ResizeItem\\n          defaultSize={\\\"80%\\\"}\\n          onChange={() => { setText('resizing') }}\\n        >\\n          <ResizeGroup direction='horizontal'>\\n            <ResizeItem\\n              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"25%\\\"}\\n              onChange={() => { setText('resizing') }}\\n              onResizeStart={() => Toast.info(opts_1)}\\n              onResizeEnd={() => { Toast.info(opts); setText('Drag to resize') }}\\n            >\\n              <div style={{ marginLeft: '20%' }}>\\n                {'tab'}\\n              </div>\\n            </ResizeItem>\\n            <ResizeHandler></ResizeHandler>\\n            <ResizeItem\\n              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"75%\\\"}\\n              onChange={() => { setText('resizing') }}\\n            >\\n              <div style={{ marginLeft: '20%' }}>\\n                {text}\\n              </div>\\n            </ResizeItem>\\n            \\n          </ResizeGroup>\\n        </ResizeItem>\\n      </ResizeGroup>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [text, setText] = useState('Drag to resize')\\n  const opts_1 = {\\n    content: 'resize start',\\n    duration: 1,\\n    stack: true,\\n  };\\n  const opts = {\\n    content: 'resize end',\\n    duration: 1,\\n    stack: true,\\n  };\\n  return (\\n    <div style={{ width: '1000px', height: '600px' }}>\\n      <ResizeGroup direction='vertical'>\\n        <ResizeItem\\n          defaultSize={\\\"80%\\\"}\\n        >\\n          <ResizeGroup direction='horizontal'>\\n            <ResizeItem\\n              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"25%\\\"}\\n              min={'10%'}\\n              max={'30%'}\\n            >\\n              <div style={{ marginLeft: '20%' }}>\\n                {text + ' min:10% max:30%'}\\n              </div>\\n            </ResizeItem>\\n            <ResizeHandler></ResizeHandler>\\n            <ResizeItem\\n              style={{ border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"50%\\\"}\\n            >\\n              <div style={{ height: '100%' }}>\\n                <ResizeGroup direction='vertical'>\\n                  <ResizeItem\\n                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n                    defaultSize={'33%'}\\n                    min={'10%'}\\n                    onChange={() => { setText('resizing') }}\\n                    onResizeEnd={() => { setText('Drag to resize') }}\\n                  >\\n                    <div style={{ marginLeft: '20%' }}>\\n                      {text + \\\" min:10%\\\"}\\n                    </div>\\n                  </ResizeItem>\\n                  <ResizeHandler></ResizeHandler>\\n                  <ResizeItem\\n                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n                    defaultSize={'33%'}\\n                    min={'10%'}\\n                    max={'40%'}\\n                  >\\n                    <div style={{ marginLeft: '20%' }}>\\n                      {text + \\\" min:10% max:40%\\\"}\\n                    </div>\\n                  </ResizeItem>\\n                  <ResizeHandler></ResizeHandler>\\n                  <ResizeItem\\n                    style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n                  >\\n                    <div style={{ marginLeft: '20%' }}>\\n                      {text}\\n                    </div>\\n                  </ResizeItem>\\n                </ResizeGroup>\\n              </div>\\n            </ResizeItem>\\n            <ResizeHandler></ResizeHandler>\\n            <ResizeItem\\n              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"1\\\"}\\n              max={'30%'}\\n            >\\n              <div style={{ marginLeft: '20%' }}>\\n                {text + ' max:30%'}\\n              </div>\\n            </ResizeItem>\\n            \\n          </ResizeGroup>\\n        </ResizeItem>\\n        <ResizeHandler></ResizeHandler>\\n        <ResizeItem\\n          defaultSize={\\\"20%\\\"}\\n          onChange={() => { setText('resizing') }}\\n        >\\n          <ResizeGroup direction='horizontal'>\\n            <ResizeItem\\n              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"50%\\\"}\\n            >\\n              <div style={{ marginLeft: '20%' }}>\\n                {'tab'}\\n              </div>\\n            </ResizeItem>\\n            <ResizeHandler></ResizeHandler>\\n            <ResizeItem\\n              style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', border: 'var(--semi-color-border) 1px solid' }}\\n              defaultSize={\\\"50%\\\"}\\n            >\\n              <div style={{ marginLeft: '20%' }}>\\n                {'content'}\\n              </div>\\n            </ResizeItem>\\n          </ResizeGroup>\\n        </ResizeItem>\\n      </ResizeGroup>\\n    </div>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Dynamic Direction\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [text, setText] = useState('drag to resize')\\n  const [direction, setDirection] = useState('horizontal')\\n\\n  const changeDirection = () => {\\n    if (direction === 'horizontal') {\\n      setDirection('vertical')\\n    } else {\\n      setDirection('horizontal')\\n    }\\n  }\\n  return (\\n    <div style={{ width: '400px', height: '300px' }}>\\n      <Button onClick={changeDirection}>{direction}</Button>\\n      <ResizeGroup direction={direction} >\\n        <ResizeItem\\n          onChange={() => { setText('resizing') }}\\n          onResizeEnd={() => { setText('drag to resize') }}\\n          defaultSize={5}\\n        >\\n            <ResizeGroup direction='horizontal'>\\n              <ResizeItem\\n                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}\\n                onChange={() => { setText('resizing') }}\\n                onResizeEnd={() => { setText('drag to resize') }}\\n              >\\n                <div style={{ marginLeft: '20%',  padding:'5px' }}>\\n                  {text}\\n                </div>\\n              </ResizeItem>\\n              <ResizeHandler></ResizeHandler>\\n              <ResizeItem\\n                style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}\\n                onChange={() => { setText('resizing') }}\\n              >\\n                <div style={{ marginLeft: '20%',  padding:'5px' }}>\\n                  {text}\\n                </div>\\n              </ResizeItem>\\n            </ResizeGroup>\\n        </ResizeItem>\\n        <ResizeHandler></ResizeHandler>\\n        <ResizeItem\\n          style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)',  }}\\n          defaultSize={1.3}\\n          onChange={() => { setText('resizing') }}\\n        >\\n          <div style={{ marginLeft: '20%',  padding:'5px' }}>\\n            {text}\\n          </div>\\n        </ResizeItem>\\n      </ResizeGroup>\\n    </div>\\n  );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Resizable\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Controls the size of the resizable box, supports both numeric and string (px/vw/vh/%) formats\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#basic-usage-and-callbacks\"\n  }, \"Size\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Sets the initial width and height, supports both numeric and string (px/vw/vh/%) formats\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#basic-usage-and-callbacks\"\n  }, \"Size\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"minWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the minimum width of the resizable box\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the maximum width of the resizable box\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"minHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the minimum height of the resizable box\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the maximum height of the resizable box\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lockAspectRatio\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Locks the aspect ratio of the resizable box when true, using the initial width and height as the ratio\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"enable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the directions in which the resizable box can be resized. If not set, all directions are enabled by default\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#controlling-resize-directions\"\n  }, \"Enable\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scale\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The scale ratio of the resizable element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boundElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Restricts the size of the resizable element within a specific element. Pass \\\"parent\\\" to set the parent element as the bounding element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"handleNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom nodes for the drag handles in each direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#customizing-corner-handler-styles\"\n  }, \"HandleNode\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"handleStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Styles for the drag handles in each direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#customizing-corner-handler-styles\"\n  }, \"HandleNode\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"handleClass\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class names for the drag handles in each direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#customizing-corner-handler-styles\"\n  }, \"HandleNode\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"snapGap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the minimum gap required to snap to the next target\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"snap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the pixel values to snap to during resizing. Both x and y are optional, allowing the definition of specific axes only\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#allowing-incremental-width-and-height-adjustment\"\n  }, \"Snap\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"null\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"grid\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the increment to align to when resizing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", \"number, number\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", \"1,1\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback during the dragging process\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(size: Size; e: Event; direction: String) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResizeStart\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when resizing starts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event; direction: String) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResizeEnd\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when resizing ends\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(size: Size; e: Event; direction: String) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ResizeGroup\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the resize direction within the group\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'horizontal' \", \"|\", \" 'vertical'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'horizontal'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ResizeHandler\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ResizeItem\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53C2\\u6570\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Used to set the initial width and height. \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"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.\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"min\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the minimum size of the resizable box (as percentage or pixel)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies the maximum size of the resizable box (as percentage or pixel)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback during the dragging process\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(size: Size; e: Event; direction: String) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResizeStart\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when resizing starts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event; direction: String) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onResizeEnd\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when resizing ends\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(size: Size; e: Event; direction: String) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/basic/resizable","next":{"fields":{"slug":"zh-CN/basic/resizable"},"id":"cd251e9b-26c2-5e33-a5c9-cd3a8430de94","frontmatter":{"title":"Resizable 伸缩框","localeCode":"zh-CN","icon":"doc-steps","showNew":null}},"previous":{"fields":{"slug":"zh-CN/basic/grid"},"id":"cc95161c-39b7-509f-abeb-3708b88abfb8","frontmatter":{"title":"Grid 栅格","localeCode":"zh-CN","icon":"doc-grid","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}