{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/space","result":{"data":{"current":{"frontmatter":{"title":"Space 间距","order":27,"brief":"设置组件之间的间距。","icon":"doc-space"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#对齐方式","title":"对齐方式"},{"url":"#间距尺寸","title":"间距尺寸"},{"url":"#间距方向","title":"间距方向"},{"url":"#设置换行","title":"设置换行"}]},{"url":"#api参考","title":"API参考"},{"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\": 27,\n  \"category\": \"基础\",\n  \"title\": \"Space 间距\",\n  \"icon\": \"doc-space\",\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 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(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Space } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Space, Button, Switch } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Space>\\n        <Switch defaultChecked={true}/>     \\n        <Button type=\\\"secondary\\\">\\u6B21\\u8981</Button>\\n        <Button type=\\\"tertiary\\\">\\u7B2C\\u4E09</Button>\\n        <Button type=\\\"warning\\\">\\u8B66\\u544A</Button>\\n    </Space>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u9F50\\u65B9\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align\"), \" \\u8BBE\\u7F6E\\u5BF9\\u9F50\\u65B9\\u5F0F\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"start\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), \"\\uFF08\\u9ED8\\u8BA4\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"end\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"baseline\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Space, Button, Tag } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const divStyle = {\\n        width: 80,\\n        height: 100,\\n        lineHight: 100,\\n        display: 'flex',\\n        alignItems: 'center',\\n        justifyContent: 'center',\\n        border: '1px solid var(--semi-color-border)',\\n        borderRadius: 3\\n    };\\n    return (\\n        <Space vertical>\\n            <Space align='start'>\\n                <div style={divStyle}>\\u6587\\u672C</div>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Tag color='green' size='large'>\\u6807\\u7B7E</Tag>\\n            </Space>\\n            <Space align='center'>\\n                <div style={divStyle}>\\u6587\\u672C</div>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Tag color='green' size='large'>\\u6807\\u7B7E</Tag>\\n            </Space>\\n            <Space align='end'>\\n                <div style={divStyle}>\\u6587\\u672C</div>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Tag color='green' size='large'>\\u6807\\u7B7E</Tag>\\n            </Space>\\n            <Space align='baseline'>\\n                <div style={divStyle}>\\u6587\\u672C</div>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Tag color='green' size='large'>\\u6807\\u7B7E</Tag>\\n            </Space>\\n        </Space>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u95F4\\u8DDD\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"spacing\"), \" \\u8BBE\\u7F6E\\u95F4\\u8DDD\\u5927\\u5C0F\\uFF0C\\u5185\\u7F6E\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tight\"), \"\\uFF088px\\uFF0C\\u9ED8\\u8BA4\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \"\\uFF0816px\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loose\"), \"\\uFF0824px\\uFF09\\uFF0C\\u5E76\\u4E14\\u652F\\u6301\\u4F20\\u5165 number \\u6765\\u81EA\\u5B9A\\u4E49\\u95F4\\u8DDD\\u5927\\u5C0F\\uFF0C\\u4E5F\\u652F\\u6301\\u4F20\\u5165 array \\u6765\\u540C\\u65F6\\u8BBE\\u7F6E\\u6C34\\u5E73\\u548C\\u5782\\u76F4\\u65B9\\u5411\\u7684\\u95F4\\u8DDD\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Space, Tabs, TabPane, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Tabs type=\\\"line\\\">\\n        <TabPane tab=\\\"tight\\\" itemKey=\\\"1\\\">\\n            <Space spacing='tight' style={{ marginTop: '15px' }}>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n            </Space>\\n        </TabPane>\\n        <TabPane tab=\\\"medium\\\" itemKey=\\\"2\\\">\\n            <Space spacing='medium' style={{ marginTop: '15px' }}>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n            </Space>\\n        </TabPane>\\n        <TabPane tab=\\\"loose\\\" itemKey=\\\"3\\\">\\n            <Space spacing='loose' style={{ marginTop: '15px' }}>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n            </Space>\\n        </TabPane>\\n        <TabPane tab=\\\"array\\\" itemKey=\\\"4\\\">\\n            <Space spacing={[8, 16]} wrap style={{ marginTop: '15px' }}>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n                <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n            </Space>\\n        </TabPane>\\n    </Tabs>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u95F4\\u8DDD\\u65B9\\u5411\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"vertical\"), \" \\u8BBE\\u7F6E\\u95F4\\u8DDD\\u662F\\u5426\\u4E3A\\u5782\\u76F4\\u65B9\\u5411\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u4E3A false\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Space, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Space vertical>\\n        <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n        <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n        <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n        <Button theme='solid' type='primary'>\\u6309\\u94AE</Button>\\n    </Space>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u6362\\u884C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u95F4\\u8DDD\\u4E3A\\u6C34\\u5E73\\u65B9\\u5411\\u65F6\\uFF0C\\u53EF\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wrap\"), \" \\u8BBE\\u7F6E\\u662F\\u5426\\u81EA\\u52A8\\u6362\\u884C\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u4E3A false\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Space, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Space wrap>\\n        {new Array(10).fill(null).map((item, idex) => (\\n            <Button theme='solid' type='secondary' key={idex}>\\u6309\\u94AE</Button>\\n        ))}\\n    </Space>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), 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  }, \"\\u5C5E\\u6027\"), 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  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u9F50\\u65B9\\u5F0F, \\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"baseline\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \">=1.17.0\")), 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  }, \"\\u6837\\u5F0F\\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  }, \">=1.17.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"spacing\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u95F4\\u8DDD\\u5C3A\\u5BF8, \\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"loose\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"tight\"), \" \\u6216 number\\u3001array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\", \"|\", \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"tight\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \">=1.17.0\")), 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  }, \"\\u5185\\u8054\\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  }, \">=1.17.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4E3A\\u5782\\u76F4\\u95F4\\u8DDD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \">=1.17.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wrap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u6362\\u884C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \">=1.17.0\"))))), 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/space","next":{"fields":{"slug":"en-US/plus/chat"},"id":"a9985179-4497-5e00-9dd3-97877b55e606","frontmatter":{"title":"Chat","localeCode":"en-US","icon":"doc-chat","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/space"},"id":"7f209117-138d-581a-811e-cb901b6379bd","frontmatter":{"title":"Space","localeCode":"en-US","icon":"doc-space","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}