{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/feedback/banner","result":{"data":{"current":{"frontmatter":{"title":"Banner","order":87,"brief":"The Banner component is usually used to identify the status or notification of the full page. It is usually resident and requires the user to close it initiatively.","icon":"doc-banner"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#types","title":"Types"},{"url":"#use-in-container","title":"Use in Container"},{"url":"#customized-content","title":"Customized Content"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 87,\n \"category\": \"Feedback\",\n \"title\": \"Banner\",\n \"subTitle\": \"Banner\",\n \"icon\": \"doc-banner\",\n \"dir\": \"column\",\n \"brief\": \"The Banner component is usually used to identify the status or notification of the full page. It is usually resident and requires the user to close it initiatively.\"\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 }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Banner } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), 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 const banner = (\\n \\n );\\n return (\\n <>\\n \\n Header\\n {visible? banner : null}\\n Content\\n \\n \\n \\n { visible ? 'Hide Banner' : 'Show Banner' }\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Types\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" prop supports one of: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \"(default),\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"danger\"), \",\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"warning\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"success\"), \".\"), 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 \\n \\n \\n \\n \\n \\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Use in Container\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"fullMode={false}\"), \" to use style for non-fullscreen mode\\u3002\\nAlso, use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"bordered\"), \" for bordered style.\"), 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
\\n {`Don't know AppKey?`}
}\\n description={
You can contact the corresponding R & D students to confirm whether you have applied for an application on the application cloud platform , and fill in the corresponding information.
You can contact the corresponding R & D students to confirm whether you have applied for an application on the application cloud platform , and fill in the corresponding information.
You can contact the corresponding R & D students to confirm whether you have applied for an application on the application cloud platform , and fill in the corresponding information.
You can contact the corresponding R & D students to confirm whether you have applied for an application on the application cloud platform , and fill in the corresponding information.