{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/sidesheet","result":{"data":{"current":{"frontmatter":{"title":"SideSheet 滑动侧边栏","order":80,"brief":"可从屏幕边沿滑出的浮层面板，通常用于承载二级操作页面","icon":"doc-sidesheet"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本","title":"基本"},{"url":"#自定义位置","title":"自定义位置"},{"url":"#自定义尺寸","title":"自定义尺寸"},{"url":"#可操作的外部区域","title":"可操作的外部区域"},{"url":"#渲染在指定容器","title":"渲染在指定容器"},{"url":"#自定义内容区域","title":"自定义内容区域"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ:"}]},"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\": 80,\n  \"category\": \"展示类\",\n  \"title\": \"SideSheet 滑动侧边栏\",\n  \"icon\": \"doc-sidesheet\",\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(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { SideSheet } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u4FA7\\u8FB9\\u680F\\u4ECE\\u53F3\\u6ED1\\u51FA\\uFF0C\\u652F\\u6301\\u70B9\\u51FB\\u906E\\u7F69\\u533A\\u5173\\u95ED\\u3002\"), 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 { SideSheet, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const change = () => {\\n        setVisible(!visible);\\n    };\\n    return (\\n        <>\\n            <Button onClick={change}>Open SideSheet</Button>\\n            <SideSheet title=\\\"\\u6ED1\\u52A8\\u4FA7\\u8FB9\\u680F\\\" visible={visible} onCancel={change}>\\n                <p>This is the content of a basic sidesheet.</p>\\n                <p>Here is more content...</p>\\n            </SideSheet>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"placement\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4FA7\\u8FB9\\u680F\\u6ED1\\u51FA\\u4F4D\\u7F6E\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \"\\u3002\"), 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 { SideSheet, RadioGroup, Radio, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const change = () => {\\n        setVisible(!visible);\\n    };\\n    const [placement, setPlacement] = useState('right');\\n    const changePlacement = e => {\\n        setPlacement(e.target.value);\\n    };\\n    return (\\n        <>\\n            <RadioGroup onChange={changePlacement} value={placement}>\\n                <Radio value={'right'}>right</Radio>\\n                <Radio value={'left'}>left</Radio>\\n                <Radio value={'top'}>top</Radio>\\n                <Radio value={'bottom'}>bottom</Radio>\\n            </RadioGroup>\\n            <br />\\n            <br />\\n            <Button onClick={change}>Open SideSheet</Button>\\n            <SideSheet title=\\\"\\u6ED1\\u52A8\\u4FA7\\u8FB9\\u680F\\\" visible={visible} onCancel={change} placement={placement}>\\n                <p>This is the content of a basic sidesheet.</p>\\n                <p>Here is more content...</p>\\n            </SideSheet>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4FA7\\u8FB9\\u680F\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \"(448px)\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \"(684px), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \"(920px)\\uFF0C\\u4EC5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"placement\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \" \\u65F6\\u751F\\u6548\\u3002\\u82E5\\u9ED8\\u8BA4\\u7684\\u5C3A\\u5BF8\\u4E0D\\u6EE1\\u8DB3\\u4F60\\u7684\\u9700\\u6C42\\uFF0C\\u4F60\\u8FD8\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width\"), \" \\u5C5E\\u6027\\u81EA\\u884C\\u8BBE\\u7F6E\\u5BBD\\u5EA6\\uFF0C\\u4F8B\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width={900}\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width={'800px'}\")), 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 { SideSheet, RadioGroup, Radio, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const change = () => {\\n        setVisible(!visible);\\n    };\\n    const [size, setSize] = useState('small');\\n    const changeSize = e => {\\n        setSize(e.target.value);\\n    };\\n    return (\\n        <>\\n            <RadioGroup onChange={changeSize} value={size}>\\n                <Radio value={'small'}>small</Radio>\\n                <Radio value={'medium'}>medium</Radio>\\n                <Radio value={'large'}>large</Radio>\\n            </RadioGroup>\\n            <br />\\n            <br />\\n            <Button onClick={change}>Open SideSheet</Button>\\n            <SideSheet title=\\\"\\u6ED1\\u52A8\\u4FA7\\u8FB9\\u680F\\\" visible={visible} onCancel={change} size={size}>\\n                <p>This is the content of a basic sidesheet.</p>\\n                <p>Here is more content...</p>\\n            </SideSheet>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u64CD\\u4F5C\\u7684\\u5916\\u90E8\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mask={false}\"), \"\\u65F6\\u5141\\u8BB8\\u5BF9\\u5916\\u90E8\\u533A\\u57DF\\u8FDB\\u884C\\u64CD\\u4F5C\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"\\u5F53 SideSheet \\u662F\\u9ED8\\u8BA4\\u6E32\\u67D3\\u5728 body \\u4E2D\\u65F6\\uFF08\\u5373\\u4E0D\\u4F20\\u5165 getPopupContainer \\u53C2\\u6570\\uFF09\\uFF0C\\u4F1A\\u5728\\u6253\\u5F00\\u65F6\\u81EA\\u52A8\\u7ED9 body \\u6DFB\\u52A0 overflow: hidden \\u6765\\u7981\\u6B62\\u6EDA\\u52A8\\u3002\\u5982\\u679C\\u4F60\\u5E0C\\u671B\\u5916\\u90E8\\u533A\\u57DF\\u4F9D\\u7136\\u53EF\\u6EDA\\u52A8\\uFF0C\\u53EF\\u4EE5\\u5C06 disableScroll \\u8BBE\\u4E3Afalse\"), 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 { SideSheet, TextArea, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const [value, setValue] = useState('');\\n    return (\\n        <>\\n            <Button onClick={() => setVisible(true)}>Open SideSheet</Button>\\n            <TextArea placeholder=\\\"Please enter something\\\" onChange={value => setValue(value)} style={{ marginTop: 12 }}/>\\n            <SideSheet\\n                title=\\\"\\u53EF\\u64CD\\u4F5C\\u5916\\u90E8\\u7684\\u4FA7\\u8FB9\\u680F\\\"\\n                visible={visible}\\n                onCancel={() => setVisible(false)}\\n                mask={false}\\n                disableScroll={false}\\n            >\\n                <p>\\u8FD9\\u91CC\\u662F\\u8F93\\u5165\\u7684\\u5185\\u5BB9\\uFF1A</p>\\n                <p>{value}</p>\\n            </SideSheet>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E32\\u67D3\\u5728\\u6307\\u5B9A\\u5BB9\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getPopupContainer\"), \" \\u6307\\u5B9A\\u7236\\u7EA7 DOM\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"\\u5BB9\\u5668\\u9700\\u8981\\u624B\\u52A8\\u8BBE\\u7F6E\\u6837\\u5F0F `overflow: hidden`\\uFF0C\\u5426\\u5219\\u4F1A\\u5BFC\\u81F4\\u52A8\\u753B\\u6EA2\\u51FA\"), 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 { SideSheet, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const [value, setValue] = useState('');\\n    const getContainer = () => {\\n        return document.querySelector('.sidesheet-container');\\n    };\\n    return (\\n        <div\\n            style={{\\n                height: 320,\\n                overflow: 'hidden',\\n                position: 'relative',\\n                border: '1px solid var(--semi-color-border)',\\n                borderRadius: 2,\\n                padding: 24,\\n                textAlign: 'center',\\n                background: 'var(--semi-color-fill-0)',\\n            }}\\n            className=\\\"sidesheet-container\\\"\\n        >\\n            <span>Render in this</span>\\n            <br />\\n            <br />\\n            <Button onClick={() => setVisible(true)}>Open SideSheet</Button>\\n            <SideSheet\\n                title=\\\"\\u6E32\\u67D3\\u5728\\u6307\\u5B9A\\u5BB9\\u5668\\u5185\\u90E8\\\"\\n                visible={visible}\\n                onCancel={() => setVisible(false)}\\n                width={220}\\n                getPopupContainer={getContainer}\\n            >\\n                <p>This is the content of a basic sidesheet.</p>\\n                <p>Here is more content...</p>\\n            </SideSheet>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u5BB9\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u81EA\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \" \\u7B49\\u521B\\u5EFA\\u51FA\\u4E30\\u5BCC\\u7684\\u5185\\u5BB9\\u6837\\u5F0F\\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, { useState } from 'react';\\nimport { SideSheet, Form, Button, Typography, Banner } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    \\n    const show = () => {\\n        setVisible(true);\\n    };\\n    \\n    const handleCancel = (e) => {\\n        setVisible(false);\\n    };\\n    \\n    const {\\n        DatePicker,\\n        Select,\\n        Radio,\\n        RadioGroup,\\n    } = Form;\\n    \\n    const footer = (\\n        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>\\n            <Button style={{ marginRight: 8 }}>\\u91CD\\u7F6E</Button>\\n            <Button theme=\\\"solid\\\">\\u63D0\\u4EA4</Button>\\n        </div>\\n    );\\n    \\n    return (\\n        <>\\n            <Button onClick={show}>More Information</Button>\\n            <SideSheet\\n                title={<Typography.Title heading={4}>\\u521B\\u5EFA\\u8D44\\u6E90\\u5305</Typography.Title>}\\n                headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}\\n                bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}\\n                visible={visible}\\n                footer={footer}\\n                closeIcon={null}\\n                onCancel={handleCancel}\\n            >\\n                <Form>\\n                    <DatePicker\\n                        field=\\\"date\\\"\\n                        type=\\\"dateTime\\\"\\n                        initValue={new Date()}\\n                        style={{ width: 272 }}\\n                        label={{ text: '\\u521B\\u5EFA\\u65F6\\u95F4', required: true }}\\n                    />\\n                    <RadioGroup field=\\\"type\\\" label=\\\"\\u76EE\\u6807\\u64CD\\u4F5C\\u7CFB\\u7EDF\\\" direction=\\\"horizontal\\\" initValue={'all'}>\\n                        <Radio value=\\\"all\\\">\\u5168\\u5E73\\u53F0</Radio>\\n                        <Radio value=\\\"ios\\\">iOS</Radio>\\n                        <Radio value=\\\"android\\\">Android</Radio>\\n                        <Radio value=\\\"web\\\">Web</Radio>\\n                    </RadioGroup>\\n                    <RadioGroup field=\\\"origin\\\" label=\\\"\\u8D44\\u6E90\\u5305\\u6765\\u6E90\\\" direction=\\\"horizontal\\\" initValue={'scm'}>\\n                        <Radio value=\\\"scm\\\">\\u4ECESCM\\u4E0A\\u4F20</Radio>\\n                        <Radio value=\\\"manual\\\">\\u624B\\u52A8\\u4E0A\\u4F20</Radio>\\n                    </RadioGroup>\\n                    <Banner\\n                        fullMode={false}\\n                        icon={null}\\n                        type=\\\"warning\\\"\\n                        bordered\\n                        description={\\n                            <>\\n                                <Typography.Text strong>\\u5F53\\u524D\\u90E8\\u7F72\\u73AF\\u5883\\uFF1A\\u7EBF\\u4E0A\\u90E8\\u7F72</Typography.Text>\\n                                <br />\\n                                <Typography.Text>\\n                                    \\u8BF7\\u9009\\u62E9\\u6B63\\u786E\\u7684SCM\\u6784\\u5EFA\\u4EA7\\u7269\\uFF0C\\u9632\\u6B62\\u51FA\\u73B0\\u4E0D\\u7B26\\u5408\\u9884\\u671F\\u7684\\u53D1\\u5E03\\u64CD\\u4F5C\\u3002\\n                                </Typography.Text>\\n                            </>\\n                        }\\n                    />\\n                    <br />\\n                    <Select\\n                        field=\\\"users\\\"\\n                        label={{ text: '\\u521B\\u5EFA\\u7528\\u6237', required: true }}\\n                        style={{ width: 560 }}\\n                        multiple\\n                        initValue={['1', '2', '3', '4']}\\n                    >\\n                        <Select.Option value=\\\"1\\\">\\u66F2\\u6668\\u4E00</Select.Option>\\n                        <Select.Option value=\\\"2\\\">\\u590F\\u53EF\\u66FC</Select.Option>\\n                        <Select.Option value=\\\"3\\\">\\u66F2\\u6668\\u4E09</Select.Option>\\n                        <Select.Option value=\\\"4\\\">\\u8521\\u598D</Select.Option>\\n                    </Select>\\n                </Form>\\n            </SideSheet>\\n        </>\\n    );\\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(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"afterVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u5C55\\u793A/\\u9690\\u85CF\\u65F6\\u52A8\\u753B\\u7ED3\\u675F\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(isVisible: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bodyStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5141\\u8BB8\\u901A\\u8FC7\\u53F3\\u4E0A\\u89D2\\u7684\\u5173\\u95ED\\u6309\\u94AE\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closeIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5173\\u95ED\\u6309\\u94AE\\u7684 icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"<IconClose /\", \">\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closeOnEsc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5141\\u8BB8\\u901A\\u8FC7\\u952E\\u76D8\\u4E8B\\u4EF6 Esc \\u89E6\\u53D1\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disableScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u6E32\\u67D3\\u5728 document.body \\u5C42\\u65F6\\u662F\\u5426\\u7981\\u6B62 body \\u7684\\u6EDA\\u52A8\\uFF0C\\u5373\\u7ED9 body \\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"overflow: hidden\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4FA7\\u8FB9\\u680F\\u5E95\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"null\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u7236\\u7EA7 DOM\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\uFF0C\\u81EA\\u5B9A\\u4E49\\u9700\\u8981\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position: relative\"), \" \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headerStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u5934\\u90E8\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u5EA6\\uFF0C\\u4F4D\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" \\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"400\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5173\\u95ED SideSheet \\u65F6\\u662F\\u5426\\u4FDD\\u7559\\u5185\\u90E8\\u7EC4\\u4EF6\\u4E0D\\u9500\\u6BC1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u906E\\u7F69\\uFF0C\\u5F53 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mask={false}\"), \" \\u65F6\\u5141\\u8BB8\\u5BF9\\u5916\\u90E8\\u533A\\u57DF\\u8FDB\\u884C\\u64CD\\u4F5C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maskClosable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5141\\u8BB8\\u901A\\u8FC7\\u70B9\\u51FB\\u906E\\u7F69\\u6765\\u5173\\u95ED\\u9762\\u677F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maskStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u906E\\u7F69\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5141\\u8BB8\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"placement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4FA7\\u8FB9\\u680F\\u6ED1\\u51FA\\u4F4D\\u7F6E\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), 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  }, \"right\"))), 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  }, \"\\u5C3A\\u5BF8\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"(448px)\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \"(684px), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"(920px)\\uFF0C\\u4EC5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \" \\u65F6\\u751F\\u6548\"), 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  }, \"small\"))), 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  }, \"\\u53EF\\u7528\\u4E8E\\u8BBE\\u7F6E\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u7684\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9762\\u677F\\u662F\\u5426\\u53EF\\u89C1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BBD\\u5EA6\\uFF0C\\u4F4D\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \" \\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"448\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u5C42 z-index \\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1000\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onCancel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u9762\\u677F\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SideSheet \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dialog\"), \" role \\u6765\\u8868\\u793A\\u5B83\\u662F\\u4E00\\u4E2A\\u5F39\\u7A97\\u7EC4\\u4EF6\\uFF0C \\u5185\\u90E8 header \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"heading\"), \" role \\u8868\\u660E\\u662F header\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SideSheet \\u4F1A\\u81EA\\u52A8\\u7981\\u6B62 body \\u7684\\u6EDA\\u52A8\\u5417\\uFF1F\\u5F53 SideSheet \\u662F\\u9ED8\\u8BA4\\u6E32\\u67D3\\u5728 body \\u4E2D\\u65F6\\uFF08\\u5373\\u4E0D\\u4F20\\u5165 getPopupContainer \\u53C2\\u6570\\uFF09\\uFF0C\\u4F1A\\u5728\\u6253\\u5F00\\u65F6\\u81EA\\u52A8\\u7ED9 body \\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"overflow: hidden\"), \" \\u6765\\u7981\\u6B62\\u6EDA\\u52A8\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"disableScroll={false}\"), \" \\u5141\\u8BB8\\u6EDA\\u52A8\\u3002\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/sidesheet","next":{"fields":{"slug":"en-US/show/table"},"id":"f5678b56-222a-500f-a3a3-b449caa5a1ad","frontmatter":{"title":"Table","localeCode":"en-US","icon":"doc-table","showNew":null}},"previous":{"fields":{"slug":"en-US/show/sidesheet"},"id":"5ce161ff-691e-5eac-8fc5-f137535f817b","frontmatter":{"title":"SideSheet","localeCode":"en-US","icon":"doc-sidesheet","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}