{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/modal","result":{"data":{"current":{"frontmatter":{"title":"Modal 模态对话框","order":76,"brief":"模态对话框用于等待用户响应、告知用户重要信息或在不丢失上下文的情况下展示更多信息","icon":"doc-modal"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本","title":"基本"},{"url":"#底部撑满","title":"底部撑满"},{"url":"#点击遮罩层不可关闭","title":"点击遮罩层不可关闭"},{"url":"#自定义按钮文字","title":"自定义按钮文字"},{"url":"#自定义按钮属性","title":"自定义按钮属性"},{"url":"#自定义对话框头部和页脚","title":"自定义对话框头部和页脚"},{"url":"#自定义对话框的样式","title":"自定义对话框的样式"},{"url":"#自定义的对话框","title":"自定义的对话框"},{"url":"#全屏-modal","title":"全屏 Modal"},{"url":"#命令式调用","title":"命令式调用"},{"url":"#hooks-用法","title":"Hooks 用法"},{"url":"#可拖拽-modal","title":"可拖拽 Modal"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#modal","title":"Modal"},{"url":"#modalmethod","title":"Modal.method()"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#键盘和焦点","title":"键盘和焦点"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"},{"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\": 76,\n  \"category\": \"展示类\",\n  \"title\": \"Modal 模态对话框\",\n  \"icon\": \"doc-modal\",\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 { Modal } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\"), 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 from 'react';\\nimport { Modal, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n        console.log('Ok button clicked');\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n        console.log('Cancel button clicked');\\n    };\\n    const handleAfterClose = () => {\\n        console.log('After Close callback executed');\\n    };\\n\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u6253\\u5F00\\u5F39\\u7A97</Button>\\n            <Modal\\n                title=\\\"\\u57FA\\u672C\\u5BF9\\u8BDD\\u6846\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                afterClose={handleAfterClose}\\n                onCancel={handleCancel}\\n                closeOnEsc={true}\\n            >\\n                This is the content of a basic modal.\\n                <br />\\n                More content...\\n            </Modal>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E95\\u90E8\\u6491\\u6EE1\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E footerFill \\u4E3A true \\u53EF\\u4F7F Modal footer \\u5E95\\u90E8\\u6309\\u94AE\\u6491\\u6EE1\\u6392\\u5217\"), 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 from 'react';\\nimport { Modal, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n        console.log('Ok button clicked');\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n        console.log('Cancel button clicked');\\n    };\\n    const handleAfterClose = () => {\\n        console.log('After Close callback executed');\\n    };\\n\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u6253\\u5F00\\u5F39\\u7A97</Button>\\n            <Modal\\n                title=\\\"\\u57FA\\u672C\\u5BF9\\u8BDD\\u6846\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                afterClose={handleAfterClose}\\n                onCancel={handleCancel}\\n                closeOnEsc={true}\\n                footerFill={true}\\n            >\\n                This is the content of a basic modal.\\n                <br />\\n                More content...\\n            </Modal>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u70B9\\u51FB\\u906E\\u7F69\\u5C42\\u4E0D\\u53EF\\u5173\\u95ED\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4FEE\\u6539 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maskClosable\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" \\u5219\\u4E0D\\u53EF\\u901A\\u8FC7\\u70B9\\u51FB\\u906E\\u7F69\\u5C42\\u6765\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846\\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 { Modal, Button } from '@douyinfe/semi-ui';\\n\\nfunction ModalDemo() {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n    };\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u70B9\\u51FB\\u906E\\u7F69\\u5C42\\u4E0D\\u53EF\\u5173\\u95ED</Button>\\n            <Modal\\n                title=\\\"\\u5BF9\\u8BDD\\u6846\\u6807\\u9898\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                onCancel={handleCancel}\\n                maskClosable={false}\\n            >\\n                <p>This is a modal that cannot be closed by clicking on the mask.</p>\\n                <p>More content...</p>\\n            </Modal>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u6587\\u5B57\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"okText\"), \" \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cancelText\"), \" \\u5C5E\\u6027\\u53EF\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u663E\\u793A\\u7684\\u6587\\u5B57\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6CE8\\u610F\\uFF1A\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\\u7684 Modal \\u9700\\u8981\\u901A\\u8FC7\\u8FD9\\u4E24\\u4E2A\\u5C5E\\u6027\\u6765\\u8BBE\\u7F6E i18 \\u7684\\u6587\\u672C\\uFF0C\\u56E0\\u4E3A\\u6211\\u4EEC\\u65E0\\u6CD5\\u4FEE\\u6539 React \\u7EC4\\u4EF6\\u6811\\uFF0C\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\\u63D2\\u5165\\u7684 Component \\u65E0\\u6CD5\\u6D88\\u8D39\\u5230 Locale \\u76F8\\u5173\\u7684 Context\"), 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 { Modal, Button } from '@douyinfe/semi-ui';\\n\\nfunction ModalDemo() {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n    };\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u6587\\u5B57</Button>\\n            <Modal\\n                title=\\\"\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u6587\\u5B57\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                onCancel={handleCancel}\\n                okText={'Sounds great!'}\\n                cancelText={'No, thanks.'}\\n            >\\n                <p>This is a modal with customized button texts.</p>\\n                <p>More content...</p>\\n            </Modal>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u5C5E\\u6027\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"okButtonProps\"), \" \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cancelButtonProps\"), \" \\u5C5E\\u6027\\u53EF\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u7684\\u5C5E\\u6027\\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 { Modal, Button } from '@douyinfe/semi-ui';\\n\\nfunction ModalDemo() {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n    };\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u5C5E\\u6027</Button>\\n            <Modal\\n                title=\\\"\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE\\u5C5E\\u6027\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                onCancel={handleCancel}\\n                okButtonProps={{ size: 'small', type: 'warning' }}\\n                cancelButtonProps={{ size: 'small', disabled: true }}\\n            >\\n                <p>This is a modal with customized button props.</p>\\n                <p>More content...</p>\\n            </Modal>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8BDD\\u6846\\u5934\\u90E8\\u548C\\u9875\\u811A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u9700\\u8981\\u5B9E\\u73B0\\u66F4\\u4E30\\u5BCC\\u7684\\u4E2A\\u6027\\u5316\\u9700\\u6C42\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"header\"), \" \\u81EA\\u5B9A\\u4E49\\u5934\\u90E8\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \" \\u81EA\\u5B9A\\u4E49\\u9875\\u811A\\u7684\\u6309\\u94AE\\u3002\\u628A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"header\"), \" \\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \"\\u65F6\\u5219\\u4E0D\\u5C55\\u793A\\u5934\\u90E8\\u533A\\u57DF\\uFF1B\\u4E0D\\u9700\\u8981\\u663E\\u793A\\u4EFB\\u4F55\\u6309\\u94AE\\u65F6\\uFF0C\\u540C\\u6837\\u53EF\\u4EE5\\u628A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \" \\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \"\\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 { Modal, Button } from '@douyinfe/semi-ui';\\n\\nfunction ModalDemo() {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n    };\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u81EA\\u5B9A\\u4E49\\u9875\\u811A\\u6837\\u5F0F</Button>\\n            <Modal\\n                title=\\\"\\u81EA\\u5B9A\\u4E49\\u9875\\u811A\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                onCancel={handleCancel}\\n                footer={\\n                    <Button type=\\\"primary\\\" onClick={handleOk}>\\n                        Yes, I Understand\\n                    </Button>\\n                }\\n            >\\n                <p>This is a modal with a customized footer.</p>\\n                <p>More content...</p>\\n            </Modal>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8BDD\\u6846\\u7684\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u53CA\\u4F4D\\u7F6E\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style.top\"), \"\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"centered\"), \" \\u4F7F\\u5BF9\\u8BDD\\u6846\\u5C45\\u4E2D\\u663E\\u793A\\u3002\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maskStyle\"), \" \\u81EA\\u5B9A\\u4E49\\u906E\\u7F69\\u6837\\u5F0F\\uFF0C\\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bodyStyle\"), \" \\u81EA\\u5B9A\\u4E49\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\\u6837\\u5F0F\\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 { Modal, Button } from '@douyinfe/semi-ui';\\n\\nfunction ModalDemo() {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n    };\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8BDD\\u6846\\u6837\\u5F0F</Button>\\n            <Modal\\n                title=\\\"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\\"\\n                visible={visible}\\n                onOk={handleOk}\\n                onCancel={handleCancel}\\n                centered\\n                bodyStyle={{ overflow: 'auto', height: 200 }}\\n            >\\n                <p style={{ lineHeight: 1.8 }}>\\n                    Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED\\n                    \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684\\n                    Web \\u5E94\\u7528\\u3002\\n                </p>\\n                <p style={{ lineHeight: 1.8 }}>\\n                    \\u533A\\u522B\\u4E8E\\u5176\\u4ED6\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u800C\\u8A00\\uFF0CSemi Design \\u4EE5\\u7528\\u6237\\u4E2D\\u5FC3\\u3001\\u5185\\u5BB9\\u4F18\\u5148\\u3001\\u8BBE\\u8BA1\\u4EBA\\u6027\\u5316\\u4E3A\\u8BBE\\u8BA1\\u7406\\u5FF5\\uFF0C\\u5177\\u6709\\u4EE5\\u4E0B\\u4F18\\u52BF\\uFF1A\\n                </p>\\n                <ul>\\n                    <li>\\n                        <p>Semi Design \\u4EE5\\u5185\\u5BB9\\u4F18\\u5148\\u8FDB\\u884C\\u8BBE\\u8BA1\\u3002</p>\\n                    </li>\\n                    <li>\\n                        <p>\\u66F4\\u5BB9\\u6613\\u5730\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\\u3002</p>\\n                    </li>\\n                    <li>\\n                        <p>\\u9002\\u7528\\u56FD\\u9645\\u5316\\u573A\\u666F\\u3002</p>\\n                    </li>\\n                    <li>\\n                        <p>\\u6548\\u7387\\u573A\\u666F\\u52A0\\u5165\\u4EBA\\u6027\\u5316\\u5173\\u6000</p>\\n                    </li>\\n                </ul>\\n            </Modal>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7684\\u5BF9\\u8BDD\\u6846\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u7075\\u6D3B\\u4F7F\\u7528\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"header\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \"\\u7B49\\u5C5E\\u6027\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E00\\u4E2A\\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u7684\\u5BF9\\u8BDD\\u6846\\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 { Modal, Button, List } from '@douyinfe/semi-ui';\\nimport { IconVigoLogo, IconSemiLogo } from '@douyinfe/semi-icons';\\n\\nfunction ModalDemo() {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    const handleOk = () => {\\n        setVisible(false);\\n    };\\n    const handleCancel = () => {\\n        setVisible(false);\\n    };\\n    const data = [\\n        {\\n            icon: <IconSemiLogo style={{ fontSize: 48 }} />,\\n            title: 'Boost new feature adoption with Integration',\\n            content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team',\\n        },\\n        {\\n            icon: <IconVigoLogo style={{ fontSize: 48 }} />,\\n            title: 'Introducing Dark Mode',\\n            content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team',\\n        },\\n        {\\n            icon: <IconSemiLogo style={{ fontSize: 48 }} />,\\n            title: 'New List Component',\\n            content: 'Sample data is prepared for you to demostrate how Integration may be useful for your team',\\n        },\\n    ];\\n    const btnStyle = {\\n        width: 240,\\n        margin: '4px 50px',\\n    };\\n    const footer = (\\n        <div style={{ textAlign: 'center' }}>\\n            <Button type=\\\"primary\\\" theme=\\\"solid\\\" onClick={handleOk} style={btnStyle}>\\n                Continue\\n            </Button>\\n            <Button type=\\\"primary\\\" theme=\\\"borderless\\\" onClick={handleCancel} style={btnStyle}>\\n                Learn more features\\n            </Button>\\n        </div>\\n    );\\n    return (\\n        <>\\n            <Button onClick={showDialog}>\\u81EA\\u5B9A\\u4E49\\u5BF9\\u8BDD\\u6846</Button>\\n            <Modal\\n                header={null}\\n                visible={visible}\\n                onOk={handleOk}\\n                onCancel={handleCancel}\\n                footer={footer}\\n            >\\n                <h3 style={{ textAlign: 'center', fontSize: 24, margin: 40 }}>Semi Design New Features</h3>\\n                <List\\n                    dataSource={data}\\n                    split={false}\\n                    renderItem={item => (\\n                        <List.Item\\n                            header={item.icon}\\n                            main={\\n                                <div>\\n                                    <h6 style={{ margin: 0, fontSize: 16 }}>{item.title}</h6>\\n                                    <p style={{ marginTop: 4, color: 'var(--semi-color-text-1)' }}>\\n                                        {item.content}\\n                                    </p>\\n                                </div>\\n                            }\\n                        />\\n                    )}\\n                />\\n            </Modal>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5168\\u5C4F Modal\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fullScreen={true}\"), \" \\u53EF\\u4EE5\\u5F00\\u542F\\u5168\\u5C4F\\u5BF9\\u8BDD\\u6846\"), 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 from 'react';\\nimport { Modal, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const onClose = () => {\\n        setVisible(false);\\n    };\\n    return (\\n        <>\\n            <Button onClick={() => setVisible(true)}>\\u6253\\u5F00\\u5168\\u5C4F\\u5F39\\u7A97</Button>\\n            <Modal title=\\\"\\u5168\\u5C4F\\u5BF9\\u8BDD\\u6846\\u6807\\u9898\\\" fullScreen visible={visible} onOk={onClose} onCancel={onClose}>\\n                <p>This is a full screen modal</p>\\n                <p>More content...</p>\\n            </Modal>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"confirm()\"), \" \\u53EF\\u4EE5\\u8BBE\\u7F6E\\u4E00\\u4E2A\\u786E\\u8BA4\\u6846\\u3002\\u652F\\u6301\\u5404\\u79CD\\u7C7B\\u578B\\u7684\\u4FE1\\u606F\\u63D0\\u793A\\u3002\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\\u4E5F\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49 icon , \\u652F\\u6301 string \\u548C ReactNode \\u7C7B\\u578B\\u3002\\u5176\\u4ED6 Modal \\u652F\\u6301\\u7684 props \\u90FD\\u53EF\\u4EE5\\u4F20\\u5165\\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 { Modal, Button } from '@douyinfe/semi-ui';\\nimport { IconSend } from '@douyinfe/semi-icons';\\n\\nModalComponent = function(props) {\\n    function success() {\\n        Modal.success({ title: 'This is a success message', content: 'bla bla bla...' });\\n    }\\n\\n    function info() {\\n        Modal.info({ title: 'Here is some info', content: 'bla bla bla...' });\\n    }\\n\\n    function error() {\\n        Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...' });\\n    }\\n\\n    function warning() {\\n        Modal.warning({ title: 'Warning: be cautious ahead', content: 'bla bla bla...' });\\n    }\\n\\n    function confirm() {\\n        Modal.confirm({ title: 'Are you sure ?', content: 'bla bla bla...' });\\n    }\\n\\n    function custom() {\\n        Modal.info({\\n            title: 'This is a custom modal',\\n            content: 'bla bla bla...',\\n            icon: <IconSend />,\\n            cancelButtonProps: { theme: 'borderless' },\\n            okButtonProps: { theme: 'solid' },\\n        });\\n    }\\n\\n    return (\\n        <div>\\n            <Button onClick={info}>Info</Button>\\n            <br />\\n            <br />\\n            <Button onClick={success}>Success</Button>\\n            <br />\\n            <br />\\n            <Button onClick={error} type=\\\"danger\\\">\\n                Error\\n            </Button>\\n            <br />\\n            <br />\\n            <Button onClick={warning} type=\\\"warning\\\">\\n                Warning\\n            </Button>\\n            <br />\\n            <br />\\n            <Button onClick={confirm} type=\\\"primary\\\">\\n                Confirm\\n            </Button>\\n            <br />\\n            <br />\\n            <Button onClick={custom}>Custom</Button>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Hooks \\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 Modal.useModal \\u521B\\u5EFA\\u652F\\u6301\\u8BFB\\u53D6 context \\u7684 contextHolder\\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 { ConfigProvider, Button, Modal } from '@douyinfe/semi-ui';\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\n\\nfunction Demo(props = {}) {\\n    const [modal, contextHolder] = Modal.useModal();\\n    const config = { title: 'This is a success message', content: 'Context consumer' };\\n\\n    return (\\n        <ConfigProvider locale={en_GB}>\\n            <div>\\n                <Button\\n                    onClick={() => {\\n                        modal.confirm(config);\\n                    }}\\n                >\\n                    Confirm Modal\\n                </Button>\\n            </div>\\n            {contextHolder}\\n        </ConfigProvider>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u62D6\\u62FD Modal\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"modalRender\"), \" \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3 Modal \\u5185\\u5BB9\\uFF0C\\u53EF\\u62D6\\u62FD Modal \\u901A\\u8FC7 DragMove \\u7EC4\\u4EF6\\u5B9E\\u73B0\\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 { ConfigProvider, Button, Modal, DragMove } from '@douyinfe/semi-ui';\\n\\nfunction Demo(props = {}) {\\n    const [visible, setVisible] = useState(false);\\n    return (\\n        <div>\\n            <Button onClick={() => setVisible(true)}>Open Modal</Button>\\n            <Modal\\n                title=\\\"\\u53EF\\u62D6\\u62FDModal\\\"\\n                visible={visible}\\n                onCancel={() => setVisible(false)}\\n                modalRender={(modal) => (\\n                    <DragMove>{modal}</DragMove>\\n                )}\\n            >\\n                <p>This is the content of a basic sidesheet.</p>\\n                <p>Here is more content...</p>\\n            </Modal>\\n        </div>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Modal\"), 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  }, \"afterClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6846\\u5B8C\\u5168\\u5173\\u95ED\\u540E\\u7684\\u56DE\\u8C03\\u51FD\\u6570 \", mdx(\"br\", null)), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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  }, \"\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cancelButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u6309\\u94AE\\u7684 props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/button#API%E5%8F%82%E8%80%83\"\n  }, \"ButtonProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cancelText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u6309\\u94AE\\u7684\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"centered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C45\\u4E2D\\u663E\\u793A\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u8BBE\\u7F6E\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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\\u663E\\u793A\\u53F3\\u4E0A\\u89D2\\u7684\\u5173\\u95ED\\u6309\\u94AE\"), 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  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"confirmLoading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE loading\"), 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  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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  }, \"\\u5BF9\\u8BDD\\u6846\\u5E95\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fullScreen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u662F\\u5426\\u662F\\u5168\\u5C4F\\uFF08\\u4F1A\\u8986\\u76D6 width height\\uFF09\"), 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  }, \"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  }, \"() => document.body\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hasCancel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u53D6\\u6D88\\u6309\\u94AE\"), 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  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6846\\u5934\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49 icon\"), 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  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846\\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  }, \"lazyRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u914D\\u5408 keepDOM \\u4F7F\\u7528\\uFF0C\\u4E3A true \\u65F6\\u6302\\u8F7D\\u65F6\\u4E0D\\u4F1A\\u6E32\\u67D3\\u5BF9\\u8BDD\\u6846\\u7EC4\\u4EF6\"), 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  }, \"mask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u906E\\u7F69\"), 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\\u5BF9\\u8BDD\\u6846\"), 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  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"modalContentClass\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u8BBE\\u7F6E\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"modalRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3 Modal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(modal: ReactNode) => 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  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A8\\u753B\\u6548\\u679C\\u5F00\\u5173\"), 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  }, \"okButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE\\u7684 props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/button#API%E5%8F%82%E8%80%83\"\n  }, \"ButtonProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"okText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE\\u7684\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"okType\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE\\u7684\\u7C7B\\u578B, \\u53EF\\u9009: 'primary'\\u3001'secondary'\\u3001'tertiary'\\u3001'warning'\\u3001'danger'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"primary\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventScroll\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u793A\\u6D4F\\u89C8\\u5668\\u662F\\u5426\\u5E94\\u6EDA\\u52A8\\u6587\\u6863\\u4EE5\\u663E\\u793A\\u65B0\\u805A\\u7126\\u7684\\u5143\\u7D20\\uFF0C\\u4F5C\\u7528\\u4E8E\\u7EC4\\u4EF6\\u5185\\u7684 focus \\u65B9\\u6CD5\\uFF0C\\u4E0D\\u5305\\u542B\\u7528\\u6237\\u4F20\\u5165\\u7684\\u7EC4\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), 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  }, \"\\u5BF9\\u8BDD\\u6846\\u5BBD\\u5EA6\\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\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"full-width\"), \"(100vw - 64px)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\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  }, \"\\u65E0\")), 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  }, \"\\u5BF9\\u8BDD\\u6846\\u7684\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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  }, \"\\u5BF9\\u8BDD\\u6846\\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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), 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  }, \"\\u906E\\u7F69\\u7684 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\\u5BF9\\u8BDD\\u6846\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE Promise \\u65F6\\uFF0C\\u53D6\\u6D88\\u6309\\u94AE\\u4F1A\\u51FA\\u73B0 loading \\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: any) => void \", \"|\", \" Promise<any\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onOk\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u786E\\u8BA4\\u6309\\u94AE\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE Promise \\u65F6\\uFF0C\\u786E\\u8BA4\\u6309\\u94AE\\u4F1A\\u51FA\\u73B0 loading \\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: any) => void \", \"|\", \" Promise<any\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Modal.method()\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.info\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.success\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.error\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.warning\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.confirm\"))), 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  }, \"bodyStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cancelButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u6309\\u94AE\\u7684 props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/button#API%E5%8F%82%E8%80%83\"\n  }, \"ButtonProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cancelText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D6\\u6D88\\u6309\\u94AE\\u7684\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"centered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C45\\u4E2D\\u663E\\u793A\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u8BBE\\u7F6E\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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\\u663E\\u793A\\u53F3\\u4E0A\\u89D2\\u7684\\u5173\\u95ED\\u6309\\u94AE\"), 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  }, \"confirmLoading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE loading\"), 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  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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  }, \"\\u5BF9\\u8BDD\\u6846\\u5E95\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footerFill\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8\\u6309\\u94AE\\u662F\\u5426\\u6491\\u6EE1 (>= 2.xx.0 )\"), 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  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6846\\u5934\\u90E8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49 icon\"), 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  }, \"mask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u906E\\u7F69\"), 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\\u5BF9\\u8BDD\\u6846\"), 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  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"modalContentClass\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u8BBE\\u7F6E\\u5BF9\\u8BDD\\u6846\\u5185\\u5BB9\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"modalRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3 Modal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(modal: ReactNode) => 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  }, \"okButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE\\u7684 props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/button#API%E5%8F%82%E8%80%83\"\n  }, \"ButtonProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"okText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE\\u7684\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"okType\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u786E\\u8BA4\\u6309\\u94AE\\u7684\\u7C7B\\u578B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"primary\")), 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  }, \"\\u65E0\")), 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  }, \"\\u5BF9\\u8BDD\\u6846\\u7684\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"520\")), 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  }, \"\\u906E\\u7F69\\u7684 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\\u56DE\\u8C03\\uFF0C\\u53C2\\u6570\\u4E3A\\u5173\\u95ED\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE promise \\u65F6 resolve \\u540E\\u81EA\\u52A8\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: any) => void \", \"|\", \" Promise<any\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onOk\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u786E\\u5B9A\\u56DE\\u8C03\\uFF0C\\u53C2\\u6570\\u4E3A\\u5173\\u95ED\\u51FD\\u6570\\uFF0C\\u8FD4\\u56DE promise \\u65F6 resolve \\u540E\\u81EA\\u52A8\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: any) => void \", \"|\", \" Promise<any\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4EE5\\u4E0A\\u51FD\\u6570\\u8C03\\u7528\\u540E\\uFF0C\\u4F1A\\u8FD4\\u56DE\\u4E00\\u4E2A\\u5F15\\u7528\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BE5\\u5F15\\u7528\\u66F4\\u65B0\\u548C\\u5173\\u95ED\\u5F39\\u7A97\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"const modal = Modal.info();\\n\\nmodal.update({\\n  title: '\\u66F4\\u65B0\\u7684\\u6807\\u9898',\\n  content: '\\u66F4\\u65B0\\u7684\\u5185\\u5BB9',\\n});\\n\\nmodal.destroy();\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.destroyAll\"), \" \")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 Modal.destroyAll() \\u53EF\\u4EE5\\u9500\\u6BC1\\u547D\\u4EE4\\u5F0F\\u53CA\\u4EE5\\u4E0A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".info()\"), \"\\u7B49\\u521B\\u5EFA\\u7684\\u5F39\\u7A97\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Modal.useModal\"), \"\\n\\u5F53\\u4F60\\u9700\\u8981\\u4F7F\\u7528 Context \\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 Modal.useModal \\u521B\\u5EFA\\u4E00\\u4E2A contextHolder \\u63D2\\u5165\\u76F8\\u5E94\\u7684\\u8282\\u70B9\\u4E2D\\u3002\\u6B64\\u65F6\\u901A\\u8FC7 hooks \\u521B\\u5EFA\\u7684 Modal \\u5C06\\u4F1A\\u5F97\\u5230 contextHolder \\u6240\\u5728\\u4F4D\\u7F6E\\u7684\\u6240\\u6709\\u4E0A\\u4E0B\\u6587\\u3002\\u521B\\u5EFA\\u7684 modal \\u5BF9\\u8C61\\u62E5\\u6709\\u4E0E \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#Modal.method()\"\n  }, \"Modal.method\"), \" \\u76F8\\u540C\\u7684\\u521B\\u5EFA\\u901A\\u77E5\\u65B9\\u6CD5\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"WAI-ARIA: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\"\n  }, \"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"role \\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dialog\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"aria-modal \\u8BBE\\u7F6E\\u4E3A true\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"aria-labelledby \\u5BF9\\u5E94 Modal header\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"aria-describedby \\u5BF9\\u5E94 Modal body\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Modal \\u5728\\u5F39\\u51FA\\u65F6\\u81EA\\u52A8\\u83B7\\u5F97\\u7126\\u70B9\\uFF0C\\u5173\\u95ED\\u65F6\\u7126\\u70B9\\u81EA\\u52A8\\u56DE\\u5F52\\u5230\\u6253\\u5F00\\u524D\\u5143\\u7D20\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" \\u952E\\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift + Tab\"), \"\\uFF0C\\u5C06\\u7126\\u70B9\\u5728 Modal \\u5185\\u79FB\\u52A8\\uFF0C\\u5305\\u62EC Modal \\u81EA\\u5E26\\u7684\\u5173\\u95ED\\u6309\\u94AE\\u548C\\u786E\\u5B9A\\u53D6\\u6D88\\u6309\\u94AE\\uFF0C\\u6B64\\u65F6 Modal \\u80CC\\u540E\\u5143\\u7D20\\u4E0D\\u53EF\\u88AB tab \\u805A\\u7126\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Modal \\u6253\\u5F00\\u65F6\\u9ED8\\u8BA4\\u805A\\u7126\\u5230\\u53D6\\u6D88\\u6309\\u94AE, \\u53EF\\u901A\\u8FC7\\u5728 cancelButtonProps \\u6216 okButtonProps \\u4F20\\u5165 autoFocus \\u6765\\u63A7\\u5236\\u8BE5\\u884C\\u4E3A\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u901A\\u8FC7\\u5728 Modal \\u5185\\u5BB9\\u4E2D\\u9700\\u8981\\u805A\\u7126\\u7684\\u8868\\u5355\\u5143\\u7D20\\u4E0A\\u6DFB\\u52A0 autoFocus \\u6765\\u8BA9 Modal \\u6253\\u5F00\\u65F6\\u81EA\\u52A8\\u805A\\u7126\\u5230\\u8BE5\\u5143\\u7D20 (\\u9700\\u540C\\u65F6\\u8BBE\\u7F6E cancelButtonProps \\u7684 autoFocus \\u4E3A false)\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4FEE\\u6539 closeOnEsc \\u9ED8\\u8BA4\\u503C\\u4E3A true\\uFF0C\\u5141\\u8BB8\\u7528\\u6237\\u901A\\u8FC7\\u952E\\u76D8\\u76F4\\u63A5\\u5173\\u95ED Modal \\u5E26\\u6765\\u66F4\\u597D\\u7684\\u4F53\\u9A8C\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u547D\\u4EE4\\u5F0F Modal \\u4E0E \\u9ED8\\u8BA4 Modal \\u4E24\\u79CD\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846\\u7684\\u6807\\u9898\\u4F7F\\u7528 \\u52A8\\u8BCD + \\u540D\\u8BCD \\u7684\\u683C\\u5F0F\\uFF0C\\u65E0\\u8BBA\\u662F\\u9648\\u8FF0\\u53E5\\u8FD8\\u662F\\u95EE\\u53E5\")), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Edit ticket\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Edit\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Delete form\\uFF1F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Are you sure you want to delete form?\")))), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E24\\u79CD\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846\\u7684\\u64CD\\u4F5C\\u6309\\u94AE\\u5728\\u4FDD\\u8BC1\\u6807\\u9898\\u63CF\\u8FF0\\u6E05\\u695A\\u7684\\u524D\\u63D0\\u4E0B\\uFF0C\\u53EA\\u9700\\u8981\\u4F7F\\u7528\\u6807\\u9898\\u5185\\u7684\\u52A8\\u8BCD\\u5373\\u53EF\")), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Edit\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Edit ticket\")))), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u547D\\u4EE4\\u5F0F Modal \\u7684\\u6B63\\u6587\\u89C4\\u8303\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5BF9\\u6807\\u9898\\u8FDB\\u884C\\u5177\\u4F53\\u7684\\u89E3\\u91CA\\u8BF4\\u660E\\uFF0C\\u4E0D\\u8981\\u91CD\\u590D\\u6807\\u9898\\u7684\\u4FE1\\u606F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u786E\\u4FDD\\u7528\\u6237\\u77E5\\u9053\\u5728\\u5FC5\\u8981\\u65F6\\u5982\\u4F55\\u91C7\\u53D6\\u884C\\u52A8\"))))), 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  }, mdx(\"h4\", {\n    parentName: \"li\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u4F7F\\u7528 LocaleProvider \\u540E\\uFF0C Modal.confirm \\u786E\\u8BA4\\u3001\\u53D6\\u6D88\\u6309\\u94AE\\u7684\\u6587\\u672C\\u6CA1\\u6709\\u56FD\\u9645\\u5316\\uFF1F\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Modal \\u4F7F\\u7528 Portal \\u5C06\\u6D6E\\u5C42\\u8282\\u70B9\\u63D2\\u5165\\u5230 DOM \\u6811\\u4E2D\\u3002\\u4F46\\u8FD9\\u4E2A\\u64CD\\u4F5C\\u4EC5\\u80FD\\u6539\\u53D8\\u8282\\u70B9\\u5728 DOM \\u6811\\u4E2D\\u7684\\u4F4D\\u7F6E\\uFF0C\\u65E0\\u6CD5\\u6539\\u53D8\\u8282\\u70B9\\u5728 React \\u8282\\u70B9\\u6811\\u4E2D\\u7684\\u4F4D\\u7F6E\\uFF0CLocalProvider\\u662F\\u57FA\\u4E8E Context \\u673A\\u5236\\u4F20\\u9012\\u7684\\uFF0C\\u5FC5\\u987B\\u662F\\u4ECE\\u5C5E\\u7684 React \\u5B50\\u7ED3\\u70B9\\u624D\\u53EF\\u6D88\\u8D39\\u5230 Local \\u76F8\\u5173 Context\\u3002\\u56E0\\u6B64\\u547D\\u4EE4\\u5F0F\\u7684 Modal \\u7684\\u5185\\u7F6E\\u6587\\u672C\\u65E0\\u6CD5\\u81EA\\u52A8\\u9002\\u914D\\u56FD\\u9645\\u5316\\u3002\\n\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"okText\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cancelText\"), \" \\u8FD9\\u4E24\\u4E2A\\u5C5E\\u6027\\u6765\\u6839\\u636E Locale \\u91CD\\u65B0\\u8BBE\\u7F6E i18 \\u7684\\u6587\\u672C\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u57281.2\\u7248\\u672C\\u4E4B\\u540E\\uFF0C\\u4F60\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 Modal.useModal \\u65B9\\u6CD5\\u6765\\u8FD4\\u56DE modal \\u5B9E\\u4F53\\u4EE5\\u53CA contextHolder \\u8282\\u70B9\\u3002\\u5C06 contextHolder \\u63D2\\u5165\\u5230\\u4F60\\u9700\\u8981\\u83B7\\u53D6 context \\u4F4D\\u7F6E\\uFF0C\\u5373\\u53EF\\u4F7F Modal \\u83B7\\u53D6\\u5230\\u5BF9\\u5E94\\u7684 Context\\uFF0C\\u5982 ConfigProvider \\u6216\\u8005 LocaleProvider \\u7684\\u914D\\u7F6E\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h4\", {\n    parentName: \"li\"\n  }, \"\\u4E3A\\u4EC0\\u4E48 title \\u548C content \\u7684\\u95F4\\u8DDD\\u5728\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\\u548C\\u975E\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\\u4E0B\\u4E0D\\u540C?\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u547D\\u4EE4\\u5F0F\\u8C03\\u7528\\u573A\\u666F\\u4E0B\\uFF0C\\u6807\\u9898\\u548C\\u5185\\u5BB9\\u7684\\u76F8\\u5173\\u6027\\u66F4\\u5F3A\\uFF0C\\u6240\\u4EE5\\u7528\\u66F4\\u8FD1\\u7684\\u8DDD\\u79BB\\u8868\\u8FBE\\u8FD9\\u79CD\\u5F3A\\u76F8\\u5173\\u6027\\uFF0C\\u7B26\\u5408\\u9884\\u671F\\u3002\\u7528\\u6237\\u5982\\u679C\\u4E0D\\u60F3\\u8981\\u8FD9\\u79CD\\u6548\\u679C\\uFF0C\\u53EF\\u4EE5\\u81EA\\u5DF1\\u505A\\u6837\\u5F0F\\u8986\\u76D6\\u3002\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"1\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/modal","next":{"fields":{"slug":"en-US/show/overflowlist"},"id":"869b8f52-d0f2-50bb-afb5-3f7e0c882af6","frontmatter":{"title":"OverflowList","localeCode":"en-US","icon":"doc-overflowList","showNew":null}},"previous":{"fields":{"slug":"en-US/show/modal"},"id":"18904872-978c-5c84-8c9e-489a0e3a45c1","frontmatter":{"title":"Modal","localeCode":"en-US","icon":"doc-modal","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}