{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/feedback/banner","result":{"data":{"current":{"frontmatter":{"title":"Banner 通知横幅","order":87,"brief":"横幅通常用于标识全页的状态或通知等。它通常是常驻的，需要用户主动将其关闭。","icon":"doc-banner"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"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":"文案规范"},{"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\": 87,\n  \"category\": \"反馈类\",\n  \"title\": \"Banner 通知横幅\",\n  \"icon\": \"doc-banner\",\n  \"dir\": \"column\",\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 { Banner } 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 dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Banner, Layout, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [visible, setVisible] = useState(false);\\n    const changeVisible = () => {\\n        setVisible(!visible);\\n    };\\n    const { Header, Footer, Content } = Layout;\\n\\n    const commonStyle = {\\n        height: 64,\\n        lineHeight: '64px',\\n        background: 'var(--semi-color-fill-0)'\\n    };\\n\\n    const banner = (\\n        <Banner \\n            onClose={changeVisible}\\n            description=\\\"Semi D2C \\u73B0\\u5DF2\\u652F\\u6301 Figma DevMode, \\u5B89\\u88C5\\u63D2\\u4EF6\\uFF0C\\u968F\\u65F6\\u67E5\\u9605\\u56FE\\u5C42\\u5BF9\\u5E94\\u7684\\u524D\\u7AEF\\u4EE3\\u7801\\\"\\n        />\\n    );\\n    return (\\n        <>\\n            <Layout className='components-layout-demo banner-basic'>\\n                <Header style={commonStyle}>Header</Header>\\n                {visible? banner : null}\\n                <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>\\n                <Footer style={commonStyle}>Footer</Footer>\\n            </Layout>\\n            <Button\\n                onClick={changeVisible}\\n                style={{\\n                    display: 'block',\\n                    width: '120px',\\n                    margin: '0 auto'\\n                }}\\n            >\\n                { visible ? 'Hide Banner' : 'Show Banner' }\\n            </Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E0D\\u540C\\u7C7B\\u578B\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u63014\\u79CD\\u7C7B\\u578B\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"info\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"warning\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"danger\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"success\"), \"\\u3002\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"info\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Banner } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <>\\n        <Banner \\n            type=\\\"info\\\"\\n            description=\\\"Semi D2C \\u73B0\\u5DF2\\u652F\\u6301 Figma DevMode, \\u5B89\\u88C5\\u63D2\\u4EF6\\uFF0C\\u968F\\u65F6\\u67E5\\u9605\\u56FE\\u5C42\\u5BF9\\u5E94\\u7684\\u524D\\u7AEF\\u4EE3\\u7801\\\"\\n        />\\n        <br/>\\n        <Banner \\n            type=\\\"warning\\\"\\n            description=\\\"\\u5F53\\u524D\\u4F7F\\u7528 Figma UI Kit \\u4E3A\\u65E7\\u7248\\uFF0C\\u53EF\\u80FD\\u65E0\\u6CD5\\u652F\\u6301\\u5B8C\\u6574\\u7684 Design to code \\u80FD\\u529B\\\"\\n        />\\n        <br/>\\n        <Banner \\n            type=\\\"danger\\\"\\n            description=\\\"\\u5F53\\u524D\\u4F7F\\u7528 API \\u5DF2\\u8FC7\\u671F\\uFF0C\\u8BF7\\u5C3D\\u5FEB\\u5347\\u7EA7\\\"\\n        />\\n        <br/>\\n        <Banner \\n            type=\\\"success\\\"\\n            description=\\\"Semi DSM, Make Semi Design to Any Design\\\"\\n        />\\n    </>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u975E\\u5168\\u5C4F\\u6A21\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u8BBE\\u7F6E  \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fullMode={false}\"), \" \\u4F7F\\u7528\\u975E\\u5168\\u5C4F\\u6A21\\u5F0F\\u7684 banner \\u6837\\u5F0F\\u3002\\n\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bordered\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u8FB9\\u6846\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Banner, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n  \\n    return (\\n        <div style={{ width: 640 }} className=\\\"components-banner-demo\\\">\\n            <Banner fullMode={false} type=\\\"info\\\" bordered icon={null} closeIcon={null}\\n                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>\\u4E0D\\u77E5\\u9053 AppKey\\uFF1F</div>}\\n                description={<div>\\u4F60\\u53EF\\u5148\\u8054\\u7CFB\\u5BF9\\u5E94\\u7684\\u7814\\u53D1\\u540C\\u5B66\\uFF0C\\u786E\\u8BA4\\u662F\\u5426\\u5DF2\\u5728 <Text link={{ href: 'https://semi.design/' }}>\\u5E94\\u7528\\u4E91\\u5E73\\u53F0</Text> \\u7533\\u8BF7\\u4E86\\u5E94\\u7528\\uFF0C\\u5E76\\u586B\\u5199\\u5BF9\\u5E94\\u7684\\u4FE1\\u606F\\u3002</div>}\\n            /><br/>\\n            <Banner fullMode={false} type=\\\"warning\\\" bordered icon={null} closeIcon={null}\\n                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>\\u4E0D\\u77E5\\u9053 AppKey\\uFF1F</div>}\\n                description={<div>\\u4F60\\u53EF\\u5148\\u8054\\u7CFB\\u5BF9\\u5E94\\u7684\\u7814\\u53D1\\u540C\\u5B66\\uFF0C\\u786E\\u8BA4\\u662F\\u5426\\u5DF2\\u5728 <Text link={{ href: 'https://semi.design/' }}>\\u5E94\\u7528\\u4E91\\u5E73\\u53F0</Text> \\u7533\\u8BF7\\u4E86\\u5E94\\u7528\\uFF0C\\u5E76\\u586B\\u5199\\u5BF9\\u5E94\\u7684\\u4FE1\\u606F\\u3002</div>}\\n            /><br/>\\n            <Banner fullMode={false} type=\\\"danger\\\" bordered icon={null} closeIcon={null}\\n                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>\\u4E0D\\u77E5\\u9053 AppKey\\uFF1F</div>}\\n                description={<div>\\u4F60\\u53EF\\u5148\\u8054\\u7CFB\\u5BF9\\u5E94\\u7684\\u7814\\u53D1\\u540C\\u5B66\\uFF0C\\u786E\\u8BA4\\u662F\\u5426\\u5DF2\\u5728 <Text link={{ href: 'https://semi.design/' }}>\\u5E94\\u7528\\u4E91\\u5E73\\u53F0</Text> \\u7533\\u8BF7\\u4E86\\u5E94\\u7528\\uFF0C\\u5E76\\u586B\\u5199\\u5BF9\\u5E94\\u7684\\u4FE1\\u606F\\u3002</div>}\\n            /><br/>\\n            <Banner fullMode={false} type=\\\"success\\\" bordered icon={null} closeIcon={null}\\n                title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>\\u4E0D\\u77E5\\u9053 AppKey\\uFF1F</div>}\\n                description={<div>\\u4F60\\u53EF\\u5148\\u8054\\u7CFB\\u5BF9\\u5E94\\u7684\\u7814\\u53D1\\u540C\\u5B66\\uFF0C\\u786E\\u8BA4\\u662F\\u5426\\u5DF2\\u5728 <Text link={{ href: 'https://semi.design/' }}>\\u5E94\\u7528\\u4E91\\u5E73\\u53F0</Text> \\u7533\\u8BF7\\u4E86\\u5E94\\u7528\\uFF0C\\u5E76\\u586B\\u5199\\u5BF9\\u5E94\\u7684\\u4FE1\\u606F\\u3002</div>}\\n            />\\n        </div>\\n    );\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \".components-banner-demo {\\n    .semi-banner-info.semi-banner-bordered {\\n        border: 1px solid var(--semi-color-primary-disabled);\\n    }\\n    .semi-banner-warning.semi-banner-bordered {\\n        border: 1px solid var(--semi-color-warning-light-active);\\n    }\\n    .semi-banner-danger.semi-banner-bordered {\\n        border: 1px solid var(--semi-color-danger-light-active);\\n    }\\n    .semi-banner-success.semi-banner-bordered {\\n        border: 1px solid var(--semi-color-success-light-active);\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5185\\u5BB9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 children \\u81EA\\u5B9A\\u4E49\\u5176\\u4ED6\\u6E32\\u67D3\\u5185\\u5BB9\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Banner } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}>\\n        <Banner\\n            fullMode={false}\\n            title=\\\"Title\\\"\\n            type=\\\"warning\\\"\\n            bordered\\n            description=\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat\\\"\\n        >\\n            <div className=\\\"semi-modal-footer\\\">\\n                <button className=\\\"semi-button semi-button-tertiary semi-button-light\\\" type=\\\"button\\\">No, thanks.</button>\\n                <button className=\\\"semi-button semi-button-warning\\\" type=\\\"button\\\">Sounds great!</button>\\n            </div>\\n        </Banner>\\n        <br/>\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"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  }, \"bordered\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u8FB9\\u6846\\uFF0C\\u4EC5\\u5728\\u975E\\u5168\\u5C4F\\u6A21\\u5F0F\\u4E0B\\u6709\\u6548\"), 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  }, \"1.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closeIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5173\\u95EDicon\\uFF0C\\u4E3A null \\u65F6\\u4E0D\\u663E\\u793A\\u5173\\u95ED\\u6309\\u94AE\"), 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  }, \"1.0\")), 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  }, \"\\u63CF\\u8FF0\\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  }, \"1.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fullMode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4E3A\\u5168\\u5C4F\\u6A21\\u5F0F\"), 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  }, \"1.0\")), 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\\uFF0C\\u4E3A null \\u65F6\\u4E0D\\u663E\\u793A icon\"), 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  }, \"1.0\")), 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  }, \"\\u5173\\u95ED\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), 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  }, \"\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), 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  }, \"\\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  }, \"1.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\")), 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  }, \"info\")), 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  }, \"\\u5173\\u95ED\\u6309\\u94AE\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u4E3A 'Close'\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Banner \\u7684\\u5173\\u95ED\\u6309\\u94AE\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" \\u952E\\u805A\\u7126\\uFF0C\\u6309\\u94AE\\u805A\\u7126\\u540E\\uFF0C\\u6572\\u51FB \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" \\u952E\\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" \\u952E\\u53EF\\u4EE5\\u5173\\u95ED banner\"))), 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  }, \"\\u5168\\u5C4F Banner\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5C3D\\u91CF\\u4FDD\\u6301\\u5185\\u5BB9\\u4E00\\u884C\\u5C55\\u793A\\u5B8C\\u5168\"), 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  }, \"\\u975E\\u5168\\u5C4F Banner\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u7CBE\\u7B80\\u7684\\u8BED\\u8A00\\u8FDB\\u884C\\u8BF4\\u660E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6807\\u9898\\u4E0A\\u5C3D\\u91CF\\u907F\\u514D\\u4F7F\\u7528\\u9017\\u53F7\\uFF0C\\u53E5\\u53F7\\u7B49\\u6807\\u70B9\\u7B26\\u53F7\\uFF0C\\u6709\\u4E14\\u53EA\\u6709\\u662F\\u7591\\u95EE\\u53E5\\u7684\\u65F6\\u5019\\uFF0C\\u652F\\u6301\\u4F7F\\u7528\\u95EE\\u53F7\\u7ED3\\u5C3E\"))), 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(\"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/feedback/banner","next":{"fields":{"slug":"en-US/feedback/notification"},"id":"bc488109-b474-5e87-a8dd-d6870325c847","frontmatter":{"title":"Notification","localeCode":"en-US","icon":"doc-notification","showNew":null}},"previous":{"fields":{"slug":"en-US/feedback/banner"},"id":"35307725-6884-5e5e-abac-f5f9780ad9f7","frontmatter":{"title":"Banner","localeCode":"en-US","icon":"doc-banner","showNew":null}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}