{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/sidesheet","result":{"data":{"current":{"frontmatter":{"title":"SideSheet","order":80,"brief":"An overlay panel that slides out from the edge of the screen, typically used to host secondary action pages.","icon":"doc-sidesheet"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#placement","title":"Placement"},{"url":"#size","title":"Size"},{"url":"#non-blocking-workflow","title":"Non-blocking Workflow"},{"url":"#rendered-inside-container","title":"Rendered Inside Container"},{"url":"#customized-content","title":"Customized Content"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"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\": 80,\n  \"category\": \"Show\",\n  \"title\": \"SideSheet\",\n  \"subTitle\": \"SideSheet\",\n  \"icon\": \"doc-sidesheet\",\n  \"brief\": \"An overlay panel that slides out from the edge of the screen, typically used to host secondary action pages.\"\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(\"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  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By default, SideSheet slides from the right side of the screen and could be closed by clicking on the mask.\"), 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=\\\"Sidesheet\\\" 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  }, \"Placement\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"placement\"), \" to set the position from which SideSheet comes in, supporting one of \", 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=\\\"Sidesheet\\\" 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  }, \"Size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" to set the size of SideSheet, supporting one of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \"(448px), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \"(684px), and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \"(920px). Only takes effects when \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"placement\"), \" is set to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \". If the default size does not meet your needs, you can also set the width by setting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width\"), \" property, for example \", 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=\\\"SideSheet\\\" 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  }, \"Non-blocking Workflow\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mask={false}\"), \" to continue working on the area outside SideSheet.\"), mdx(Notice, {\n    title: \"Tips\",\n    mdxType: \"Notice\"\n  }, \"By default, if you are not setting `getPopupContainer`, SideSheet is rendered inside body. If you want body element to be able to scroll, you could set disableScroll to false and the component will not add `overflow: hidden` to it.\"), 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, TextArea } 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 title=\\\"SideSheet\\\" visible={visible} onCancel={() => setVisible(false)} mask={false} disableScroll={false}>\\n                <p>Here is what you entered: </p>\\n                <p>{value}</p>\\n            </SideSheet>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Rendered Inside Container\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getPopupContainer\"), \" to render SideSheet in targeted DOM. \"), mdx(Notice, {\n    title: \"Tips\",\n    mdxType: \"Notice\"\n  }, \"The container must have `overflow: hidden` to avoid animated SideSheet overflows.\"), 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=\\\"SideSheet\\\"\\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  }, \"Customized Content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \" and other Semi Components, you could create customized information display layers.\"), 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, Button, Typography, Banner, Form } 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 }}>Reset</Button>\\n            <Button theme=\\\"solid\\\">Submit</Button>\\n        </div>\\n    );\\n    \\n    return (\\n        <>\\n            <Button onClick={show}>More Information</Button>\\n            <SideSheet\\n                title={<Typography.Title heading={4}>Create New Package</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                onCancel={handleCancel}\\n            >\\n                <Form>\\n                    <DatePicker\\n                        field=\\\"date\\\"\\n                        type=\\\"dateTime\\\"\\n                        initValue={new Date()}\\n                        style={{ width: 272 }}\\n                        label={{ text: 'Created Time', required: true }}\\n                    />\\n                    <RadioGroup\\n                        field=\\\"type\\\"\\n                        label=\\\"Target Operating System\\\"\\n                        direction=\\\"horizontal\\\"\\n                        initValue={'all'}\\n                    >\\n                        <Radio value=\\\"all\\\">All</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=\\\"Package Origin\\\" direction=\\\"horizontal\\\" initValue={'scm'}>\\n                        <Radio value=\\\"scm\\\">Uploaded From SCM</Radio>\\n                        <Radio value=\\\"manual\\\">Uploaded Manually</Radio>\\n                    </RadioGroup>\\n                    <Banner\\n                        fullMode={false}\\n                        icon={null}\\n                        closeIcon={null}\\n                        bordered\\n                        description={\\n                            <Typography.Text>\\n                                Software Config Management (SCM) is a platform for publish and manage code versions.\\n                                You can compile and manage code versions in this platform.\\n                            </Typography.Text>\\n                        }\\n                    />\\n                    <br />\\n                    <Select\\n                        field=\\\"users\\\"\\n                        label={{ text: 'Created User', required: true }}\\n                        style={{ width: 560 }}\\n                        multiple\\n                        initValue={['1', '2', '3', '4']}\\n                    >\\n                        <Select.Option value=\\\"1\\\">Tianyi Lee</Select.Option>\\n                        <Select.Option value=\\\"2\\\">Chen Qu</Select.Option>\\n                        <Select.Option value=\\\"3\\\">Yan Cai</Select.Option>\\n                        <Select.Option value=\\\"4\\\">Wenzhuo Cui</Select.Option>\\n                    </Select>\\n                </Form>\\n            </SideSheet>\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Callback function when animation of SideSheet ends\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(isVisible: boolean) => 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  }, \"bodyStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Content 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), 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  }, \"closable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to show close button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Icon for close button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"<IconClose /\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"oggle whether to allow close modal by keyboard event Esc\"), 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  }, \"-\")), 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  }, \"Toggle whether to add \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"overflow: hidden\"), \" to document.body element. Only works when not setting \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"getPopupContainer\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Container where to render SideSheet inside, you need to set 'position: relative`  This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => HTMLElement\"), 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  }, \"headerStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Header 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  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Height, takes effect when \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"placement\"), \" is set to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"400\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Keep components inside when closing sideSheet\"), 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  })), 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  }, \"Toggle whether to show mask. When \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mask={false}\"), \", you could continue operations outside SideSheet\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Toggle whether to allow closing when clicking mask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Mask 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  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to turn on animation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Sliding position, one of \", 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(\"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  }, \"Size, one of \", 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), only take effects when placement is set to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \" or \", 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  }, \"small\")), 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  }, \"Inline 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  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"visible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle visibility of the SideSheet\"), 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  }, \"-\")), 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  }, \"Width, takes effect when \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"placement\"), \" is set to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"448\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Z-index value for SideSheet\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1000\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"Callback function when clicking cancel button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => 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  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SideSheet has a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dialog\"), \" role to indicate that it is a pop-up component, and the internal header has a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"heading\"), \" role to indicate that it is a header.\"))), 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/show/sidesheet","next":{"fields":{"slug":"zh-CN/show/sidesheet"},"id":"56cda28c-c722-5f6f-a05a-545bcd4ff810","frontmatter":{"title":"SideSheet 滑动侧边栏","localeCode":"zh-CN","icon":"doc-sidesheet","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/scrolllist"},"id":"afcda291-df22-534e-93c9-05f1fa758e79","frontmatter":{"title":"ScrollList 滚动列表","localeCode":"zh-CN","icon":"doc-scrolllist","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}