{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/feedback/notification","result":{"data":{"current":{"frontmatter":{"title":"Notification 通知","order":88,"brief":"通知用于主动向用户发出消息通知","icon":"doc-notification"},"fields":{"type":"feedback"},"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 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#文案规范","title":"文案规范"},{"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\": 88,\n  \"category\": \"反馈类\",\n  \"title\": \"Notification 通知\",\n  \"icon\": \"doc-notification\",\n  \"width\": \"65%\",\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 NotificationCard = makeShortcode(\"NotificationCard\");\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 { Notification } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u666E\\u901A\\u901A\\u77E5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6700\\u57FA\\u672C\\u7684\\u7528\\u6CD5\\uFF0C3s \\u540E\\u81EA\\u52A8\\u5173\\u95ED\"), 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 { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Button\\n        onClick={() =>\\n            Notification.open({\\n                title: 'Hi, Bytedance',\\n                content: 'ies dance dance dance',\\n                duration: 3,\\n            })\\n        }\\n    >\\n        Display Notification\\n    </Button>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E0D\\u540C\\u4F4D\\u7F6E\\u5F39\\u51FA\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4ECE\\u591A\\u4E2A\\u4E0D\\u540C\\u4F4D\\u7F6E\\u5F39\\u51FA\\uFF1A\\u9ED8\\u8BA4\\u53F3\\u4E0A\\u89D2 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topRight\"), \"\\u3002\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topRight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomRight\"), \"\\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 { Notification, Button, ButtonGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        duration: 3,\\n        position: 'topRight',\\n        content: 'semi-ui-notification',\\n        title: 'Hi bytedance',\\n    };\\n\\n    return (\\n        <>\\n            <ButtonGroup>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'top' })}>top</Button>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'topLeft' })}>topLeft</Button>\\n                <Button onClick={() => Notification.info(opts)}>topRight</Button>\\n            </ButtonGroup>\\n            <br />\\n            <br />\\n            <ButtonGroup>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'bottom' })}>bottom</Button>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'bottomRight' })}>bottomRight</Button>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'bottomLeft' })}>bottomLeft</Button>\\n            </ButtonGroup>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u6709\\u56FE\\u6807\\u7684\\u901A\\u77E5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5305\\u62EC\\u6210\\u529F\\u3001\\u5931\\u8D25\\u3001\\u8B66\\u544A\\u3001\\u63D0\\u793A\"), 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 { Notification, Button } from '@douyinfe/semi-ui';\\nimport { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let opts = {\\n        title: 'Hi, Bytedance',\\n        content: 'ies dance dance dance',\\n        duration: 3,\\n    };\\n\\n    return (\\n        <>\\n            <h5>\\u9ED8\\u8BA4\\u7684\\u56FE\\u6807</h5>\\n            <Button type=\\\"primary\\\" onClick={() => Notification.success(opts)} style={{ margin: 4 }}>\\n                Success\\n            </Button>\\n            <Button onClick={() => Notification.info(opts)} style={{ margin: 4 }}>\\n                Info\\n            </Button>\\n            <Button type=\\\"warning\\\" onClick={() => Notification.warning(opts)} style={{ margin: 4 }}>\\n                Warning\\n            </Button>\\n            <Button type=\\\"danger\\\" onClick={() => Notification.error(opts)} style={{ margin: 4 }}>\\n                Error\\n            </Button>\\n            <h5>\\u81EA\\u5B9A\\u4E49\\u56FE\\u6807</h5>\\n            <Button\\n                icon={<IconToutiaoLogo />}\\n                style={{ marginRight: 5 }}\\n                onClick={() =>\\n                    Notification.info({\\n                        ...opts,\\n                        icon: <IconToutiaoLogo style={{ color: 'red' }} />,\\n                    })\\n                }\\n            ></Button>\\n            <Button\\n                icon={<IconVigoLogo />}\\n                style={{ marginRight: 5 }}\\n                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo /> })}\\n            ></Button>\\n            <Button\\n                icon={<IconVigoLogo />}\\n                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}\\n            ></Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u8272\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u8BBE\\u7F6E\\u6D45\\u8272\\u586B\\u5145\\u6837\\u5F0F\\u63D0\\u9AD8\\u4E0E\\u754C\\u9762\\u7684\\u5BF9\\u6BD4\\uFF0C\\u9ED8\\u8BA4\\u4E3A 'normal' \\u7684\\u767D\\u8272\\u6A21\\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 { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        title: 'Hi, Bytedance',\\n        content: 'Hi, Bytedance dance dance',\\n        duration: 3,\\n        theme: 'light',\\n    };\\n\\n    return (\\n        <>\\n            <Button onClick={() => Notification.info(opts)}>Info</Button>\\n            <br />\\n            <br />\\n            <Button onClick={() => Notification.success(opts)}>Success</Button>\\n            <br />\\n            <br />\\n            <Button type=\\\"warning\\\" onClick={() => Notification.warning(opts)}>\\n                Warning\\n            </Button>\\n            <br />\\n            <br />\\n            <Button type=\\\"danger\\\" onClick={() => Notification.error(opts)}>\\n                Error\\n            </Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u94FE\\u63A5\\u6587\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u5408 Typography \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u64CD\\u4F5C\\u533A\\u94FE\\u63A5\\u6587\\u672C\\uFF0C\\u7528\\u6765\\u914D\\u5408\\u66F4\\u590D\\u6742\\u7684\\u573A\\u666F\\u7684\\u4F7F\\u7528\\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 { Notification, Button, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const { Text } = Typography;\\n\\n    let opts = {\\n        title: 'This is a title',\\n        content: (\\n            <>\\n                <div>Hi, Bytedance dance dance</div>\\n                <div style={{ marginTop: 8 }}>\\n                    <Text link>\\u67E5\\u770B\\u8BE6\\u60C5</Text>\\n                    <Text link style={{ marginLeft: 20 }}>\\n                        \\u4E00\\u4F1A\\u518D\\u770B\\n                    </Text>\\n                </div>\\n            </>\\n        ),\\n        duration: 3,\\n    };\\n\\n    return <Button onClick={() => Notification.info(opts)}>Display Notification</Button>;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4FEE\\u6539\\u5EF6\\u65F6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u65F6\\u957F 10s\\uFF0C\\u9ED8\\u8BA4\\u65F6\\u957F\\u4E3A 3s\"), 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 { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        content: 'Hi, Bytedance dance dance',\\n        duration: 10,\\n    };\\n\\n    return <Button onClick={() => Notification.info(opts)}>Close After 10s</Button>;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u624B\\u52A8\\u5173\\u95ED\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E duration \\u4E3A 0 \\u65F6\\uFF0C\\u901A\\u77E5\\u5C06\\u4E0D\\u4F1A\\u81EA\\u52A8\\u5173\\u95ED\\uFF0C\\u6B64\\u65F6\\u53EA\\u80FD\\u624B\\u52A8\\u5173\\u95ED\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        content: 'Not auto close',\\n        title: 'Hi',\\n        duration: 0,\\n    };\\n    const [ids, setIds] = useState([]);\\n    function show() {\\n        let id = Notification.info(opts);\\n        setIds([...ids, id]);\\n    }\\n    function hide() {\\n        let idsTmp = [...ids];\\n        Notification.close(idsTmp.shift());\\n        setIds(idsTmp);\\n    }\\n    return (\\n        <>\\n            <Button type=\\\"primary\\\" onClick={show}>\\n                Show Notification\\n            </Button>\\n            <br />\\n            <br />\\n            <Button type=\\\"primary\\\" onClick={hide}>\\n                Hide Notification\\n            </Button>\\n        </>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u65B0\\u5185\\u5BB9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u552F\\u4E00\\u7684 id \\u6765\\u66F4\\u65B0\\u5185\\u5BB9\\u3002 >=2.45.0\"), 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 { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Button\\n        onClick={() => {\\n            const id = Notification.open({\\n                title: 'Hi, Bytedance',\\n                content: 'ies dance dance dance',\\n                duration: 3,\\n            })\\n            setTimeout(() => {\\n                Notification.open({\\n                    title: 'Hi, Bytedance',\\n                    content: 'updated',\\n                    duration: 10,\\n                    id\\n                })\\n            }, 1000)\\n        }\\n        }\\n    >\\n        Display Notification\\n    </Button>\\n);\\n\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u7684\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u4F7F\\u7528\\u65B9\\u5F0F\\u5982\\u4E0B\\uFF1A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C55\\u793A\\uFF1A\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F20\\u5165 options \\u5BF9\\u8C61\\uFF0C\\u8FD4\\u56DE\\u503C\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \"\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const id = Notification.open({ /*...options*/ })\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.open({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.info({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.error({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.warning({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.success({content: 'message', duration: 3})\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u624B\\u52A8\\u5173\\u95ED \\uFF08id \\u4E3A\\u5C55\\u793A\\u65B9\\u6CD5\\u7684\\u8FD4\\u56DE\\u503C\\uFF09\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.close(id)\"))), 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  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u901A\\u77E5\\u5185\\u5BB9\"), 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  }, \"duration\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u52A8\\u5173\\u95ED\\u7684\\u5EF6\\u65F6\\uFF0C\\u5355\\u4F4D s\\uFF0C\\u8BBE\\u4E3A 0 \\u65F6\\u4E0D\\u81EA\\u52A8\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\"), 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\\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(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"\\u5DE6\\u4E0A\\u89D2 icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.Node\"), 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  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomLeft\"), \"\\u3001\", 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  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\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(\"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  }, \"\\u586B\\u5145\\u6837\\u5F0F\\uFF0C\\u652F\\u6301\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"normal\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"normal\")), 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  }, \"\\u901A\\u77E5\\u6807\\u9898\"), 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u5C42 z-index \\u503C\\uFF0C\\u9996\\u6B21\\u8BBE\\u7F6E\\u4E00\\u6B21\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1010\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u901A\\u77E5\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u901A\\u77E5\\u5173\\u95ED\\u7684\\u56DE\\u8C03\\u51FD\\u6570(\\u4E3B\\u52A8\\u5173\\u95ED\\u3001\\u5EF6\\u65F6\\u5230\\u8FBE\\u5173\\u95ED\\u90FD\\u4F1A\\u89E6\\u53D1)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onCloseClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E3B\\u52A8\\u70B9\\u51FB\\u5173\\u95ED\\u6309\\u94AE\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(id: string \", \"|\", \" number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5168\\u5C40\\u914D\\u7F6E\\u5728\\u8C03\\u7528\\u524D\\u63D0\\u524D\\u914D\\u7F6E\\uFF0C\\u5168\\u5C40\\u4E00\\u6B21\\u751F\\u6548\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.config(config)\"))), 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  }, \"bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" 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  }, \"duration\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u52A8\\u5173\\u95ED\\u7684\\u5EF6\\u65F6\\uFF0C\\u5355\\u4F4D s\\uFF0C\\u8BBE\\u4E3A 0 \\u65F6\\u4E0D\\u81EA\\u52A8\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"left\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E left\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" 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  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomLeft\"), \"\\u3001\", 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  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"right\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E right\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" 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  }, \"top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u4F4D\\u7F6E top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u5C42 z-index \\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1010\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" \\u4E3A 'alert'\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u77E5\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \" \\u6807\\u8BB0\\u4E3A\\u5BF9\\u5E94\\u901A\\u77E5\\u6807\\u9898\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"div\", {\n    style: {\n      border: '1px solid var(--semi-color-border)',\n      padding: 10,\n      marginBottom: 24,\n      justifyContent: 'center',\n      display: 'flex'\n    }\n  }, mdx(NotificationCard, {\n    type: \"info\",\n    title: \"Task completed\",\n    content: mdx(\"div\", null, \"400 tasks succeed and 600 failed\", mdx(\"div\", {\n      style: {\n        color: 'var(--semi-color-primary)',\n        marginTop: 4,\n        fontWeight: 600\n      }\n    }, \"Check failed tasks\")),\n    mdxType: \"NotificationCard\"\n  })), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u7B80\\u6D01\\u660E\\u4E86\\u7684\\u8BED\\u8A00\\u8FDB\\u884C\\u8BF4\\u660E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u907F\\u514D\\u4F7F\\u7528\\u9017\\u53F7\\uFF0C\\u53E5\\u53F7\\u7B49\\u6807\\u70B9\\u7B26\\u53F7\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6B63\\u6587\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728\\u4FE1\\u606F\\u4F20\\u9012\\u5B8C\\u6574\\u7684\\u524D\\u63D0\\u4E0B\\uFF0C\\u5C3D\\u53EF\\u80FD\\u5730\\u5C06\\u6B63\\u6587\\u538B\\u7F29\\u81F3 1 -2 \\u53E5\\u8BDD\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5BF9\\u6807\\u9898\\u8FDB\\u884C\\u8BE6\\u5C3D\\u5730\\u63CF\\u8FF0\\u6216\\u8005\\u89E3\\u91CA\\uFF0C\\u800C\\u4E0D\\u662F\\u5BF9\\u6807\\u9898\\u7684\\u91CD\\u590D\\u8BF4\\u660E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u6B63\\u786E\\u7684\\u6807\\u70B9\\u7B26\\u53F7\\uFF0C\\u53E5\\u5B50\\u5185\\u4F7F\\u7528\\u9017\\u53F7\\uFF0C\\u53E5\\u5B50\\u95F4\\u4F7F\\u7528\\u53E5\\u53F7\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u64CD\\u4F5C\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6587\\u6848\\u9700\\u8981\\u5C55\\u793A\\u64CD\\u4F5C\\u7684\\u5177\\u4F53\\u542B\\u4E49\")))), 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  }, mdx(NotificationCard, {\n    type: \"info\",\n    style: {\n      width: 350\n    },\n    title: \"Task completed\",\n    content: mdx(\"div\", null, \" 400 tasks succeed and 600 failed \", mdx(\"div\", {\n      style: {\n        color: 'var(--semi-color-primary)',\n        marginTop: 4,\n        fontWeight: 600\n      }\n    }, \"Check failed tasks\")),\n    mdxType: \"NotificationCard\"\n  })), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(NotificationCard, {\n    type: \"info\",\n    style: {\n      width: 350\n    },\n    title: \"Status editing tasks completed\",\n    content: mdx(\"div\", null, \" 400 tasks succeed and 600 failed \", mdx(\"div\", {\n      style: {\n        color: 'var(--semi-color-primary)',\n        marginTop: 4,\n        fontWeight: 600\n      }\n    }, \"Check\")),\n    mdxType: \"NotificationCard\"\n  })))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  }), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5168\\u5C40\\u9500\\u6BC1\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.destroyAll()\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Hook Notification\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.useNotification\"), mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u5F53\\u4F60\\u9700\\u8981\\u4F7F\\u7528 Context \\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 Notification.useNotification \\u521B\\u5EFA\\u4E00\\u4E2A contextHolder \\u63D2\\u5165\\u76F8\\u5E94\\u7684\\u8282\\u70B9\\u4E2D\\u3002\\u6B64\\u65F6\\u901A\\u8FC7 hooks \\u521B\\u5EFA\\u7684 Notification \\u5C06\\u4F1A\\u5F97\\u5230 contextHolder \\u6240\\u5728\\u4F4D\\u7F6E\\u7684\\u6240\\u6709\\u4E0A\\u4E0B\\u6587\\u3002\\u521B\\u5EFA\\u7684 notification \\u5BF9\\u8C61\\u62E5\\u6709\\u4E0E\\u4EE5\\u4E0B\\u65B9\\u6CD5\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"error\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"open\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"close\"), \"\\u3002\\u4F7F\\u7528\\u65B9\\u6CD5\\u53EF\\u4EE5\\u53C2\\u8003\\uFF1A\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/feedback/toast#Hooks%E7%94%A8%E6%B3%95\"\n  }, \"useToast\")))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/feedback/notification","next":{"fields":{"slug":"en-US/feedback/feedback"},"id":"f1d228b8-2543-56ae-937e-77d815378ce6","frontmatter":{"title":"Feedback","localeCode":"en-US","icon":"doc-feedback","showNew":true}},"previous":{"fields":{"slug":"en-US/feedback/notification"},"id":"bc488109-b474-5e87-a8dd-d6870325c847","frontmatter":{"title":"Notification","localeCode":"en-US","icon":"doc-notification","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}