{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/userGuide","result":{"data":{"current":{"frontmatter":{"title":"UserGuide 用户引导","order":85,"brief":"用于页面对新用户进行功能引导","icon":"doc-userGuide"},"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":"#api-参考","title":"API 参考","items":[{"url":"#stepsstep","title":"Steps.Step"}]},{"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\": 85,\n  \"category\": \"展示类\",\n  \"title\": \"UserGuide 用户引导\",\n  \"icon\": \"doc-userGuide\",\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 { UserGuide } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <br />\\n            <br />\\n            <Space>\\n                <Switch id={'basic-demo-1'} defaultChecked={true}></Switch>\\n                <Tag id={'basic-demo-2'}> Default Tag </Tag>\\n                <Button id={'basic-demo-3'}>\\u786E\\u5B9A</Button>\\n            </Space>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={true}\\n                visible={visible}\\n                steps={[\\n                    {\\n                        target: document.querySelector('#basic-demo-1'),\\n                        title: '\\u65B0\\u624B\\u5F15\\u5BFC',\\n                        description: 'Hello ByteDancer!',\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        target: document.querySelector('#basic-demo-2'),\\n                        title: 'Switch',\\n                        description: 'This is a Semi Switch',\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        target: document.querySelector('#basic-demo-3'),\\n                        title: 'Button',\\n                        description: 'This is a Semi Button',\\n                        position: 'bottom',\\n                    },\\n                ]}\\n                onChange={(current) => {\\n                    console.log('\\u5F53\\u524D\\u5F15\\u5BFC\\u6B65\\u9AA4', current);\\n                }}\\n                onNext={(current) => {\\n                    console.log('\\u4E0B\\u4E00\\u6B65\\u5F15\\u5BFC');\\n                }}\\n                onPrev={(current) => {\\n                    console.log('\\u4E0A\\u4E00\\u6B65\\u5F15\\u5BFC');\\n                }}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"popup\"), \" \\u6C14\\u6CE1\\u5361\\u7247\\u6A21\\u5F0F\\u4E0B\\u63D0\\u4F9B\\u4E24\\u79CD\\u4E3B\\u9898 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \"\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <br />\\n            <br />\\n            <Space>\\n                <Switch id={'theme-demo-1'} defaultChecked={true}></Switch>\\n                <Tag id={'theme-demo-2'}> Default Tag </Tag>\\n                <Button id={'theme-demo-3'}>\\u786E\\u5B9A</Button>\\n            </Space>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={true}\\n                visible={visible}\\n                theme=\\\"primary\\\"\\n                steps={[\\n                    {\\n                        target: document.querySelector('#theme-demo-1'),\\n                        title: '\\u65B0\\u624B\\u5F15\\u5BFC',\\n                        description: 'Hello ByteDancer!',\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        target: document.querySelector('#theme-demo-2'),\\n                        title: 'Switch',\\n                        description: 'This is a Semi Switch',\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        target: document.querySelector('#theme-demo-3'),\\n                        title: 'Button',\\n                        description: 'This is a Semi Button',\\n                        position: 'bottom',\\n                    },\\n                ]}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6C14\\u6CE1\\u5361\\u7247\\u5F39\\u51FA\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"popup\"), \" \\u6C14\\u6CE1\\u5361\\u7247\\u6A21\\u5F0F\\u4E0B\\u63D0\\u4F9B 12 \\u79CD\\u5F39\\u51FA\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\u6709\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topLeft\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topRight\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomLeft\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomRight\"), \"\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showArrow\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u662F\\u5426\\u663E\\u793A\\u7BAD\\u5934\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button id={'position-demo'} onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={true}\\n                visible={visible}\\n                steps={[\\n                    {\\n                        target: document.querySelector('#position-demo'),\\n                        title: '\\u65B0\\u624B\\u5F15\\u5BFC',\\n                        description: 'Hello ByteDancer!',\\n                        position: 'top',\\n                    },\\n                    {\\n                        target: document.querySelector('#position-demo'),\\n                        title: 'New Position',\\n                        description: 'This is Right Position',\\n                        position: 'right',\\n                    },\\n                    {\\n                        target: document.querySelector('#position-demo'),\\n                        title: 'Hide Arrow',\\n                        description: 'We hide the arrow',\\n                        position: 'bottom',\\n                        showArrow: false,\\n                    },\\n                ]}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u9AD8\\u4EAE\\u533A\\u57DF\\u5927\\u5C0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"spotlightPadding\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <br />\\n            <br />\\n            <Space>\\n                <Switch id={'padding-demo-1'} defaultChecked={true}></Switch>\\n                <Tag id={'padding-demo-2'}> Default Tag </Tag>\\n                <Button id={'padding-demo-3'}>\\u786E\\u5B9A</Button>\\n            </Space>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={true}\\n                visible={visible}\\n                spotlightPadding={10}\\n                steps={[\\n                    {\\n                        target: document.querySelector('#padding-demo-1'),\\n                        title: '\\u65B0\\u624B\\u5F15\\u5BFC',\\n                        description: 'Hello ByteDancer!',\\n                    },\\n                    {\\n                        target: document.querySelector('#padding-demo-2'),\\n                        title: 'New Padding',\\n                        description: 'This is 10px padding',\\n                    },\\n                    {\\n                        target: document.querySelector('#padding-demo-3'),\\n                        title: 'Change Padding',\\n                        spotlightPadding: 15,\\n                        description: 'We change the Padding to 15px',\\n                    },\\n                ]}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B9A\\u5236\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"nextButtonProps\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"prevButtonProps\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u6309\\u94AE\\u7684\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <br />\\n            <br />\\n            <Space>\\n                <Switch id={'button-demo-1'} defaultChecked={true}></Switch>\\n                <Tag id={'button-demo-2'}> Default Tag </Tag>\\n                <Button id={'button-demo-3'}>\\u786E\\u5B9A</Button>\\n            </Space>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={true}\\n                visible={visible}\\n                nextButtonProps={{\\n                    children: 'Next',\\n                }}\\n                prevButtonProps={{\\n                    children: 'Prev',\\n                    theme: 'borderless',\\n                }}\\n                finishText=\\\"\\u6211\\u77E5\\u9053\\u5566\\uFF01\\\"\\n                steps={[\\n                    {\\n                        target: document.querySelector('#button-demo-1'),\\n                        title: '\\u65B0\\u624B\\u5F15\\u5BFC',\\n                        description: 'Hello ByteDancer!',\\n                    },\\n                    {\\n                        target: document.querySelector('#button-demo-2'),\\n                        title: 'New Button Style',\\n                        description: 'Button text is Next',\\n                    },\\n                    {\\n                        target: document.querySelector('#button-demo-3'),\\n                        title: 'New finish button text',\\n                        description: 'Button text is I know',\\n                    },\\n                ]}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"current\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u5F53\\u524D\\u5F15\\u5BFC\\u6B65\\u9AA4\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const [current, setCurrent] = useState(0);\\n\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <br />\\n            <br />\\n            <Space>\\n                <Switch id={'controlled-demo-1'} defaultChecked={true}></Switch>\\n                <Tag id={'controlled-demo-2'}> Default Tag </Tag>\\n                <Button id={'controlled-demo-3'}>\\u786E\\u5B9A</Button>\\n            </Space>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={true}\\n                visible={visible}\\n                current={current}\\n                steps={[\\n                    {\\n                        target: document.querySelector('#controlled-demo-1'),\\n                        title: '\\u65B0\\u624B\\u5F15\\u5BFC',\\n                        description: 'Hello ByteDancer!',\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        target: document.querySelector('#controlled-demo-2'),\\n                        title: 'Switch',\\n                        description: 'This is a Semi Switch',\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        target: document.querySelector('#controlled-demo-3'),\\n                        title: 'Button',\\n                        description: 'This is a Semi Button',\\n                        position: 'bottom',\\n                    },\\n                ]}\\n                onChange={(current) => {\\n                    setCurrent(current);\\n                }}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    setCurrent(0);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    setCurrent(0);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F39\\u7A97\\u5F0F\\u5F15\\u5BFC\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"modal\"), \" \\u5F00\\u542F\\u5F39\\u7A97\\u5F0F\\u5F15\\u5BFC\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch, Image, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <UserGuide\\n                mode=\\\"modal\\\"\\n                mask={true}\\n                visible={visible}\\n                steps={[\\n                    {\\n                        title: '\\u6B22\\u8FCE\\u4F7F\\u7528 Semi DSM!',\\n                        description: <div>\\u4F60\\u53EF\\u4EE5\\u4ECE\\u5DF2\\u53D1\\u5E03\\u7684\\u4E3B\\u9898\\u51FA\\u53D1\\uFF0C\\u6216\\u8005\\u9009\\u62E9{<Typography.Text strong>\\u7ACB\\u5373\\u521B\\u9020</Typography.Text>}\\u6765\\u521B\\u9020\\u4E00\\u4E2A\\u65B0\\u7684\\u4E3B\\u9898</div>,\\n                        cover: <Image \\n                            width={'600px'} \\n                            height={'100%'} \\n                            src=\\\"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_welcome.png\\\"\\n                        />,\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        title: '\\u9AD8\\u53EF\\u7528\\u7684\\u8272\\u76D8',\\n                        description: '\\u9009\\u53D6\\u4E3B\\u8272\\u540E\\uFF0C\\u6211\\u4EEC\\u7684\\u989C\\u8272\\u7B97\\u6CD5\\u4F1A\\u4E3A\\u4F60\\u751F\\u6210\\u4E00\\u5957\\u9AD8\\u53EF\\u7528\\u7684\\u8272\\u76D8',\\n                        cover: <Image \\n                            width={'600px'} \\n                            height={'100%'} \\n                            src=\\\"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_console.png\\\"\\n                        />,\\n                        position: 'bottom',\\n                    },\\n                    {\\n                        title: '\\u81EA\\u7531\\u5B9A\\u5236',\\n                        description: '\\u5F00\\u59CB\\u5B9A\\u5236\\u5C5E\\u4E8E\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5427\\uFF01',\\n                        cover: <Image \\n                            width={'600px'} \\n                            height={'100%'} \\n                            src=\\\"https://lf9-static.bytednsdoc.com/obj/eden-cn/nuhpxphk/dsm/dsm_palette.png\\\" \\n                        />,\\n                        position: 'bottom',\\n                    },\\n                ]}\\n                onChange={(current) => {\\n                    console.log('\\u5F53\\u524D\\u5F15\\u5BFC\\u6B65\\u9AA4', current);\\n                }}\\n                onNext={(current) => {\\n                    console.log('\\u4E0B\\u4E00\\u6B65\\u5F15\\u5BFC');\\n                }}\\n                onPrev={(current) => {\\n                    console.log('\\u4E0A\\u4E00\\u6B65\\u5F15\\u5BFC');\\n                }}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u65E0\\u906E\\u7F69\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mask\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" \\u5F00\\u542F\\u65E0\\u906E\\u7F69\\u5F15\\u5BFC\\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 from 'react';\\nimport { UserGuide, Button, Space, Tag, Switch, Image } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const showDialog = () => {\\n        setVisible(true);\\n    };\\n    return (\\n        <div>\\n            <Button id={'mask-demo'} onClick={showDialog}>\\u5F00\\u59CB\\u5F15\\u5BFC</Button>\\n            <UserGuide\\n                mode=\\\"popup\\\"\\n                mask={false}\\n                visible={visible}\\n                steps={[\\n                    {\\n                        target: document.querySelector('#mask-demo'),\\n                        title: 'No Mask',\\n                        description: 'Hello ByteDancer!',\\n                    },\\n                ]}\\n                onFinish={() => {\\n                    setVisible(false);\\n                    console.log('\\u5F15\\u5BFC\\u5B8C\\u6210');\\n                }}\\n                onSkip={() => {\\n                    setVisible(false);\\n                    console.log('\\u8DF3\\u8FC7\\u5F15\\u5BFC');\\n                }}\\n            />  \\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"hr\", {\n    parentName: \"section\"\n  }), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"current\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u6B65\\u9AA4\\u7684\\u7D22\\u5F15\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"finishText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u540E\\u4E00\\u6B65\\u5B8C\\u6210\\u6309\\u94AE\\u7684\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'\\u5B8C\\u6210'\"), 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\\u8499\\u5C42\"), 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  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F15\\u5BFC\\u6A21\\u5F0F\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"popup\"), \"\\uFF08\\u6C14\\u6CE1\\u5361\\u7247\\uFF09\\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"modal\"), \"\\uFF08\\u5F39\\u7A97\\u5F0F\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"popup\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"nextButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u4E00\\u6B65\\u6309\\u94AE\\u7684\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u6539\\u53D8\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(current: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFinish\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B8C\\u6210\\u6240\\u6709\\u6B65\\u9AA4\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onNext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u4E0B\\u4E00\\u6B65\\u6309\\u94AE\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(current: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPrev\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u4E0A\\u4E00\\u6B65\\u6309\\u94AE\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(current: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSkip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u8DF3\\u8FC7\\u6309\\u94AE\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u76F8\\u5BF9\\u4E8E\\u76EE\\u6807\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topLeft\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rightTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rightBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomLeft\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomRight\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prevButtonProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4E00\\u6B65\\u6309\\u94AE\\u7684\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ButtonProps\"), 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  }, \"showPrevButton\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u4E0A\\u4E00\\u6B65\\u6309\\u94AE\"), 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  }, \"showSkipButton\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u8DF3\\u8FC7\\u6309\\u94AE\"), 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  }, \"spotlightPadding\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u4EAE\\u533A\\u57DF\\u7684\\u5185\\u8FB9\\u8DDD\\uFF0C\\u5355\\u4F4D\\u4E3A\\u50CF\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"steps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F15\\u5BFC\\u6B65\\u9AA4\\u914D\\u7F6E\\uFF0C\\u5FC5\\u586B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"StepItem[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.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  }, \"theme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E3B\\u9898\\u6837\\u5F0F\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"default\"), 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  }, \"\\u662F\\u5426\\u663E\\u793A\\u5F15\\u5BFC\"), 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  }, \"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\"), 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u5C42\\u5C42\\u7EA7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1030\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Steps.Step\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u7684\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u7684\\u5C01\\u9762\\u56FE\"), 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  }, \"target\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u76EE\\u6807\\u5143\\u7D20\\uFF0C\\u9AD8\\u4EAE\\u533A\\u57DF\\u4F1A\\u805A\\u7126\\u5230\\u8FD9\\u4E2A\\u5143\\u7D20\\u4E0A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(() => Element) \", \"|\", \" Element\"), 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  }, \"\\u6B65\\u9AA4\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" 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  }, \"description\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B65\\u9AA4\\u63CF\\u8FF0\"), 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  }, \"mask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u6B64\\u6B65\\u9AA4\\u7684\\u8499\\u5C42\\uFF0C\\u4F1A\\u8986\\u76D6\\u5168\\u5C40\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), 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  }, \"showArrow\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u7BAD\\u5934\\uFF08\\u4EC5\\u5728 mode=\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"popup\"), \" \\u65F6\\u6709\\u6548\\uFF09\"), 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  }, \"spotlightPadding\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B64\\u6B65\\u9AA4\\u9AD8\\u4EAE\\u533A\\u57DF\\u533A\\u57DF\\u7684\\u5185\\u8FB9\\u8DDD\\uFF0C\\u4F1A\\u8986\\u76D6\\u5168\\u5C40\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"theme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B64\\u6B65\\u9AA4\\u7684\\u4E3B\\u9898\\uFF0C\\u4F1A\\u8986\\u76D6\\u5168\\u5C40\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\")), 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  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6B64\\u6B65\\u9AA4\\u5F39\\u51FA\\u5C42\\u7684\\u4F4D\\u7F6E\\uFF0C\\u4F1A\\u8986\\u76D6\\u5168\\u5C40\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/userGuide","next":{"fields":{"slug":"en-US/show/chart"},"id":"479baeb1-c967-582b-a41e-bece70061743","frontmatter":{"title":"Data Visualization","localeCode":"en-US","icon":"doc-vchart","showNew":null}},"previous":{"fields":{"slug":"en-US/show/userGuide"},"id":"fcfbd10c-293f-5246-964e-0d9a14369366","frontmatter":{"title":"UserGuide","localeCode":"en-US","icon":"doc-userGuide","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}