{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/resizable","result":{"data":{"current":{"frontmatter":{"title":"Resizable 伸缩框","order":21,"brief":"根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩","icon":"doc-steps"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#单个组件-基本使用","title":"单个组件 基本使用"},{"url":"#控制伸缩方向","title":"控制伸缩方向"},{"url":"#设置变化比例","title":"设置变化比例"},{"url":"#锁定横纵比","title":"锁定横纵比"},{"url":"#设置最大最小宽高","title":"设置最大，最小宽高"},{"url":"#受控宽高","title":"受控宽高"},{"url":"#设置缩放值","title":"设置缩放值"},{"url":"#根据元素限制元素宽高","title":"根据元素限制元素宽高"},{"url":"#自定义边角-handler-样式","title":"自定义边角 handler 样式"},{"url":"#允许阶段性调整宽高","title":"允许阶段性调整宽高"},{"url":"#组合组件-基本使用","title":"组合组件 基本使用"},{"url":"#嵌套使用","title":"嵌套使用"},{"url":"#动态方向","title":"动态方向"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#resizable","title":"Resizable"},{"url":"#resizegroup","title":"ResizeGroup"},{"url":"#resizehandler","title":"ResizeHandler"},{"url":"#resizeitem","title":"ResizeItem"}]},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n \"order\": 21,\n \"category\": \"基础\",\n \"title\": \"Resizable 伸缩框\",\n \"icon\": \"doc-steps\",\n \"brief\": \"根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩\"\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 }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Resizable \\u4ECE 2.69.0 \\u5F00\\u59CB\\u652F\\u6301\"), 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 }, \"\\u5355\\u4E2A\\u7EC4\\u4EF6 \\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultSize\"), \"\\u8BBE\\u7F6E\\u521D\\u59CB\\u5927\\u5C0F\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onResizeStart\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onResizeEnd\"), \"\\u8BBE\\u7F6E\\u62D6\\u62FD\\u7684\\u56DE\\u8C03\"), 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
\\n {\\n setText('resizing');\\n }}\\n onResizeStart={() => Toast.info(opts_1)}\\n onResizeEnd={() => {\\n Toast.info(opts_2);\\n setText('Drag edge to resize');\\n }}\\n >\\n
{text}
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u63A7\\u5236\\u4F38\\u7F29\\u65B9\\u5411\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"enable\"), \"\\u7684\\u503C\\u5F00\\u542F/\\u5173\\u95ED\\u7279\\u5B9A\\u4F38\\u7F29\\u65B9\\u5411\\uFF0C\\u9ED8\\u8BA4\\u503C\\u5747\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\")), 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
\\n
\\n \\n \\n {b ? 'able' : 'disable'}\\n \\n
\\n \\n
{'enable.left:' + b}
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E\\u53D8\\u5316\\u6BD4\\u4F8B\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ratio\"), \"\\u8BBE\\u7F6E\\u62D6\\u52A8\\u548C\\u5B9E\\u9645\\u53D8\\u5316\\u7684\\u6BD4\\u4F8B\"), 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
\\n \\n
ratio=2
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u9501\\u5B9A\\u6A2A\\u7EB5\\u6BD4\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"lockAspectRatio\"), \"\\u8BBE\\u7F6E\\u9501\\u5B9A\\u6A2A\\u7EB5\\u6BD4,\\u53EF\\u4EE5\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"boolean\"), \"\\u6216\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"number\"), \",\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"number\"), \"\\u65F6\\u8868\\u793A\\u6A2A\\u7EB5\\u6BD4\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"number\"), \",\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\"), \"\\u65F6\\u9501\\u5B9A\\u521D\\u59CB\\u6A2A\\u7EB5\\u6BD4\"), 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
\\n \\n
lock
\\n \\n \\n
16 / 9
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E\\u6700\\u5927\\uFF0C\\u6700\\u5C0F\\u5BBD\\u9AD8\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxHeight\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxWidth\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"minHeight\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"minWidth\"), \" \\u8BBE\\u7F6E\\u6700\\u5927\\uFF0C\\u6700\\u5C0F\\u5BBD\\u9AD8\"), 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
\\n \\n
width\\u572850\\u5230200\\u4E4B\\u95F4\\uFF0Cheight\\u572850\\u5230300\\u4E4B\\u95F4
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u53D7\\u63A7\\u5BBD\\u9AD8\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"size\"), \" \\u63A7\\u5236\\u5143\\u7D20\\u7684\\u5BBD\\u9AD8\"), 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
\\n \\n \\n
\\n \\u53D7\\u63A7\\n
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E\\u7F29\\u653E\\u503C\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"scale\"), \"\\uFF0C\\u6574\\u4F53\\u7F29\\u653E\\u5143\\u7D20\"), 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
\\n \\n
scale 0.5
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6839\\u636E\\u5143\\u7D20\\u9650\\u5236\\u5143\\u7D20\\u5BBD\\u9AD8\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 boundElement \\u8BBE\\u7F6E\\u7528\\u4E8E\\u9650\\u5236\\u5BBD\\u9AD8\\u7684\\u5143\\u7D20\\uFF0C\\u652F\\u6301 string\\uFF08'parent'\\uFF5C'window'\\uFF09\"), 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
\\n \\n
bound\\uFF1Aparent
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u8FB9\\u89D2 handler \\u6837\\u5F0F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 handleNode \\u8BBE\\u7F6E\\u4E0D\\u540C\\u65B9\\u5411\\u7684\\u62D6\\u52A8\\u5143\\u7D20\\u8282\\u70B9\\uFF0C\\u53EF\\u901A\\u8FC7 handleStyle\\uFF0ChandleClassName \\u8BBE\\u7F6E\\u4E0D\\u540C\\u65B9\\u5411\\u4E0A\\u7684\\u6837\\u5F0F\"), 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
\\n \\n \\n
\\n ),\\n }}\\n >\\n
right
\\n \\n \\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5141\\u8BB8\\u9636\\u6BB5\\u6027\\u8C03\\u6574\\u5BBD\\u9AD8\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u901A\\u8FC7 grid \\uFF0Csnap \\u5C5E\\u6027\\u5141\\u8BB8\\u9010\\u6E10\\u8C03\\u6574\\u5BBD\\u9AD8\\u3002 grid \\u5C5E\\u6027\\u7528\\u4E8E\\u6307\\u5B9A\\u8C03\\u6574\\u5927\\u5C0F\\u5E94\\u5BF9\\u9F50\\u7684\\u589E\\u91CF\\u3002\\u9ED8\\u8BA4\\u4E3A \", \"[1, 1]\", \"\\u3002 snap \\u5C5E\\u6027\\u7528\\u4E8E\\u6307\\u5B9A\\u8C03\\u6574\\u5927\\u5C0F\\u65F6\\u5E94\\u5BF9\\u9F50\\u7684\\u7EDD\\u5BF9\\u50CF\\u7D20\\u503C\\u3002 x \\u548C y \\u90FD\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u5141\\u8BB8\\u4EC5\\u5305\\u542B\\u8981\\u5B9A\\u4E49\\u7684\\u8F74\\u3002\\u9ED8\\u8BA4\\u4E3A\\u7A7A\\u3002\\u4EE5\\u4E0A\\u4E24\\u4E2A\\u53C2\\u6570\\u53EF\\u7ED3\\u5408 snapGap \\u4F7F\\u7528\\uFF0C\\u8BE5\\u53C2\\u6570\\u7528\\u4E8E\\u6307\\u5B9A\\u79FB\\u52A8\\u5230\\u4E0B\\u4E00\\u4E2A\\u76EE\\u6807\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u95F4\\u9699\\u3002\\u9ED8\\u8BA4\\u4E3A 0\\uFF0C\\u8FD9\\u610F\\u5473\\u7740\\u59CB\\u7EC8\\u4F7F\\u7528 grid/snap \\u8BBE\\u5B9A\\u7684\\u76EE\\u6807\\u3002\"), 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
\\n \\n
snap
\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u7EC4\\u5408\\u7EC4\\u4EF6 \\u57FA\\u672C\\u4F7F\\u7528\"), mdx(Notice, {\n type: \"primary\",\n title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n mdxType: \"Notice\"\n }, \"`ResizeGroup`\\u7684\\u7236\\u5143\\u7D20\\u9700\\u8981\\u5177\\u6709\\u4E3B\\u8F74\\u65B9\\u5411\\u4E0A\\u7684\\u5C3A\\u5BF8 \\u6700\\u597D\\u4E0D\\u8981\\u4E3A`ResizeItem`\\u8BBE\\u7F6E`padding`\\uFF0C\\u4F1A\\u5BFC\\u81F4\\u6700\\u5C0F\\u5C3A\\u5BF8\\u4E0D\\u7B26\\u5408\\u9884\\u671F\\uFF0C\\u53EF\\u4EE5\\u4E3A\\u5B50\\u5143\\u7D20\\u8BBE\\u7F6E`padding`\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"direction\"), \"\\u8BBE\\u7F6E\\u4F38\\u7F29\\u65B9\\u5411\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"horizontal\"), \"\\u548C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"vertical\"), \" \\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onResizeStart\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onResizeEnd\"), \"\\u56DE\\u8C03\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"min\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"max\"), \"\\u8BBE\\u7F6E\\u6700\\u5927\\u6700\\u5C0F\\u5BBD\\u9AD8\"), 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
\\n \\n {\\n setText('resizing');\\n }}\\n onResizeEnd={() => {\\n setText('Drag to resize');\\n }}\\n >\\n
{text + ' min:10%'}
\\n \\n \\n {\\n setText('resizing');\\n }}\\n >\\n
{text + ' min:10% max:30%'}
\\n \\n \\n {\\n setText('resizing');\\n }}\\n >\\n
{text}
\\n \\n \\n {\\n setText('resizing');\\n }}\\n >\\n
{text}
\\n \\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5D4C\\u5957\\u4F7F\\u7528\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"direction\"), \"\\u8BBE\\u7F6E\\u4F38\\u7F29\\u65B9\\u5411\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"horizontal\"), \"\\u548C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"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
\\n \\n {\\n setText('resizing');\\n }}\\n onResizeStart={() => Toast.info(opts_1)}\\n onResizeEnd={() => {\\n Toast.info(opts);\\n setText('Drag to resize');\\n }}\\n >\\n
{'header'}
\\n \\n \\n {\\n setText('resizing');\\n }}\\n >\\n \\n {\\n setText('resizing');\\n }}\\n onResizeStart={() => Toast.info(opts_1)}\\n onResizeEnd={() => {\\n Toast.info(opts);\\n setText('Drag to resize');\\n }}\\n >\\n
{'tab'}
\\n \\n \\n {\\n setText('resizing');\\n }}\\n >\\n
{text}
\\n \\n \\n \\n \\n
\\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
\\n \\n \\n \\n \\n
{text + ' min:10% max:30%'}
\\n \\n \\n \\n
\\n \\n {\\n setText('resizing');\\n }}\\n onResizeEnd={() => {\\n setText('Drag to resize');\\n }}\\n >\\n
{text + ' min:10%'}
\\n \\n \\n \\n
{text + ' min:10% max:40%'}
\\n \\n \\n \\n
{text}
\\n \\n \\n
\\n \\n \\n \\n
{text + ' max:30%'}
\\n \\n \\n \\n \\n {\\n setText('resizing');\\n }}\\n >\\n \\n \\n
{'tab'}
\\n \\n \\n \\n
{'content'}
\\n \\n \\n \\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u52A8\\u6001\\u65B9\\u5411\"), 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
\\n \\n \\n { setText('resizing') }}\\n onResizeEnd={() => { setText('drag to resize') }}\\n defaultSize={5}\\n >\\n \\n { setText('resizing') }}\\n onResizeEnd={() => { setText('drag to resize') }}\\n >\\n
\\n {text}\\n
\\n \\n \\n { setText('resizing') }}\\n >\\n
\\n {text}\\n
\\n \\n \\n \\n \\n { setText('resizing') }}\\n >\\n
\\n {text}\\n
\\n \\n \\n
\\n );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Resizable\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5355\\u4E2A\\u4F38\\u7F29\\u6846\\u7EC4\\u4EF6\\u3002\"), 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 }, \"\\u7C7B\\u540D\"), 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 }, \"\\u63A7\\u5236\\u4F38\\u7F29\\u6846\\u7684\\u5927\\u5C0F\\uFF0C\\u652F\\u6301\\u6570\\u5B57\\u548C\\u5B57\\u7B26\\u4E32\\uFF08px/vw/vh/%\\uFF09\\u4E24\\u79CD\\u683C\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E4%B8%8E%E5%9B%9E%E8%B0%83\"\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 }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u521D\\u59CB\\u5BBD\\u9AD8\\uFF0C\\u652F\\u6301\\u6570\\u5B57\\u548C\\u5B57\\u7B26\\u4E32\\uFF08px/vw/vh/%\\uFF09\\u4E24\\u79CD\\u683C\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E4%B8%8E%E5%9B%9E%E8%B0%83\"\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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u6700\\u5C0F\\u5BBD\\u5EA6\"), 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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u6700\\u5927\\u5BBD\\u5EA6\"), 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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u6700\\u5C0F\\u9AD8\\u5EA6\"), 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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u6700\\u5927\\u9AD8\\u5EA6\"), 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 }, \"\\u8BBE\\u7F6E\\u4F38\\u7F29\\u6846\\u6A2A\\u7EB5\\u6BD4\\uFF0C\\u5F53\\u4E3A\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \"\\u65F6\\u6309\\u7167\\u521D\\u59CB\\u5BBD\\u9AD8\\u9501\\u5B9A\"), 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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u53EF\\u4EE5\\u4F38\\u7F29\\u7684\\u65B9\\u5411\\uFF0C\\u6CA1\\u6709\\u8BBE\\u7F6E\\u4E3A false\\uFF0C\\u5219\\u9ED8\\u8BA4\\u5141\\u8BB8\\u8BE5\\u65B9\\u5411\\u7684\\u62D6\\u52A8\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E6%8E%A7%E5%88%B6%E4%BC%B8%E7%BC%A9%E6%96%B9%E5%90%91\"\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 }, \"\\u53EF\\u4F38\\u7F29\\u5143\\u7D20\\u88AB\\u7F29\\u653E\\u7684\\u6BD4\\u4F8B\"), 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 }, \"\\u7528\\u4E8E\\u9650\\u5236\\u53EF\\u4F38\\u7F29\\u5143\\u7D20\\u5BBD\\u9AD8\\u7684\\u5143\\u7D20,\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"parent\"), \" \\u8BBE\\u7F6E\\u7236\\u8282\\u70B9\\u4E3A\\u9650\\u5236\\u8282\\u70B9\"), 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 }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u62D6\\u62FD\\u5904\\u7406\\u5143\\u7D20\\u5404\\u4E2A\\u65B9\\u5411\\u7684\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BE%B9%E8%A7%92handler%E6%A0%B7%E5%BC%8F\"\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 }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u62D6\\u62FD\\u5904\\u7406\\u5143\\u7D20\\u5404\\u4E2A\\u65B9\\u5411\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BE%B9%E8%A7%92handler%E6%A0%B7%E5%BC%8F\"\n }, \"HandleStyles\")), 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 }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u62D6\\u62FD\\u5904\\u7406\\u5143\\u7D20\\u5404\\u4E2A\\u65B9\\u5411\\u7684\\u7C7B\\u540D\\u79F0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BE%B9%E8%A7%92handler%E6%A0%B7%E5%BC%8F\"\n }, \"HandleClasses\")), 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 }, \"\\u6837\\u5F0F\"), 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 }, \"\\u7528\\u4E8E\\u6307\\u5B9A\\u79FB\\u52A8\\u5230\\u4E0B\\u4E00\\u4E2A\\u76EE\\u6807\\u6240\\u9700\\u7684\\u6700\\u5C0F\\u95F4\\u9699\\u3002\"), 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 }, \"\\u6307\\u5B9A\\u8C03\\u6574\\u5927\\u5C0F\\u65F6\\u5E94\\u5BF9\\u9F50\\u7684\\u7EDD\\u5BF9\\u50CF\\u7D20\\u503C\\u3002 x \\u548C y \\u90FD\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u5141\\u8BB8\\u4EC5\\u5305\\u542B\\u8981\\u5B9A\\u4E49\\u7684\\u8F74\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#%E5%85%81%E8%AE%B8%E9%98%B6%E6%AE%B5%E6%80%A7%E8%B0%83%E6%95%B4%E5%AE%BD%E9%AB%98\"\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 }, \"\\u6307\\u5B9A\\u8C03\\u6574\\u5927\\u5C0F\\u5E94\\u5BF9\\u9F50\\u7684\\u589E\\u91CF\"), 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 }, \"\\u62D6\\u62FD\\u8FC7\\u7A0B\\u4E2D\\u7684\\u56DE\\u8C03\"), 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 }, \"\\u5F00\\u59CB\\u4F38\\u7F29\\u7684\\u56DE\\u8C03\"), 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 }, \"\\u7ED3\\u675F\\u4F38\\u7F29\\u7684\\u56DE\\u8C03\"), 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 }, \"\\u7C7B\\u540D\"), 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 }, \"\\u6307\\u5B9AGroup\\u5185\\u7684\\u4F38\\u7F29\\u65B9\\u5411\"), 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 }, \"\\u7C7B\\u540D\"), 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 }, \"\\u6837\\u5F0F\"), 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 }, \"\\u7C7B\\u540D\"), 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 }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u521D\\u59CB\\u5BBD\\u9AD8\\uFF0C\", mdx(\"strong\", {\n parentName: \"td\"\n }, \"\\u5B57\\u7B26\\u4E32\\u652F\\u6301%\\u548Cpx\\u5355\\u4F4D\\uFF0C\\u5F53\\u5B57\\u7B26\\u4E32\\u4E3A\\u7EAF\\u6570\\u5B57\\u6216\\u76F4\\u63A5\\u8BBE\\u7F6E\\u6570\\u5B57\\u65F6\\u8868\\u793A\\u6309\\u7167\\u503C\\u7684\\u6BD4\\u4F8B\\u5206\\u914D\\u5269\\u4F59\\u7A7A\\u95F4\")), 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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u6700\\u5C0F\\u5C3A\\u5BF8\\uFF08\\u767E\\u5206\\u6BD4\\u6216\\u50CF\\u7D20\\u503C\\uFF09\"), 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 }, \"\\u6307\\u5B9A\\u4F38\\u7F29\\u6846\\u6700\\u5927\\u5C3A\\u5BF8\\uFF08\\u767E\\u5206\\u6BD4\\u6216\\u50CF\\u7D20\\u503C\\uFF09\"), 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 }, \"\\u6837\\u5F0F\"), 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 }, \"\\u62D6\\u62FD\\u8FC7\\u7A0B\\u4E2D\\u7684\\u56DE\\u8C03\"), 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 }, \"\\u5F00\\u59CB\\u4F38\\u7F29\\u7684\\u56DE\\u8C03\"), 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 }, \"\\u7ED3\\u675F\\u4F38\\u7F29\\u7684\\u56DE\\u8C03\"), 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 }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/resizable","next":{"fields":{"slug":"en-US/basic/button"},"id":"fc739721-edb4-571f-9854-10e56ff47894","frontmatter":{"title":"Button","localeCode":"en-US","icon":"doc-button","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/resizable"},"id":"77123d15-52ca-5701-aa84-a658fbe0e6e3","frontmatter":{"title":"Resizable","localeCode":"en-US","icon":"doc-steps","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}