{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/layout","result":{"data":{"current":{"frontmatter":{"title":"Layout","order":19,"brief":"Used to quickly divide the overall layout of the page","icon":"doc-layout"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#overview","title":"Overview"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#three-section-layout","title":"Three-section Layout"},{"url":"#left-sidebar-layout","title":"Left-sidebar Layout"},{"url":"#right-sidebar-layout","title":"Right-sidebar Layout"},{"url":"#sidebar-layout","title":"Sidebar Layout"},{"url":"#responsive-layout","title":"Responsive Layout"}]},{"url":"#layout-examples","title":"Layout Examples","items":[{"url":"#top-nav-layout","title":"Top-nav Layout"},{"url":"#top-nav-sidebar-layout","title":"Top-Nav SideBar Layout"},{"url":"#sidebar-navigation","title":"SideBar Navigation"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#layout","title":"Layout"},{"url":"#layoutsider","title":"Layout.Sider"},{"url":"#responsive-map","title":"responsive map"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#related-material","title":"Related Material"}]},"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\": 19,\n \"category\": \"Basic\",\n \"title\": \"Layout\",\n \"subTitle\": \"Layout\",\n \"icon\": \"doc-layout\",\n \"dir\": \"column\",\n \"brief\": \"Used to quickly divide the overall layout of the page\"\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 Notice = makeShortcode(\"Notice\");\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 }, \"Overview\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Layout\"), \": Layout containers. You can nest \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Header\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Sider\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Content\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Footer\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Layout\"), \" itself inside.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Header\"), \": Head component, can only be used inside \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Layout\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Sider\"), \": Sidebar, can only be used inside \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Layout\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Content\"), \": Content component, can only be used inside \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Layout\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Footer\"), \": Footer component, can only be used inside \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Layout\"), \".\")), mdx(Notice, {\n title: \"Notice\",\n mdxType: \"Notice\"\n }, \"1\\u3001Layout components are implemented with Flex layout. Browser compatibility may need to be considered. \", mdx(\"br\", null), \"2\\u3001The Layout component will only help you implement the layout, but will not include styles such as background color, text color, width and height. You can pass in style according to your actual needs or write a separate css implementation given a specific className\")), 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 { Layout } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Three-section Layout\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout } from '@douyinfe/semi-ui';\\n\\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 return (\\n \\n
Header
\\n Content\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Left-sidebar Layout\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Header, Footer, Sider, Content } = Layout;\\n const commonStyle = {\\n height: 64,\\n lineHeight: '64px',\\n background: 'var(--semi-color-fill-0)'\\n };\\n return (\\n \\n
Header
\\n \\n Sider\\n Content\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Right-sidebar Layout\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Header, Footer, Sider, Content } = Layout;\\n const commonStyle = {\\n height: 64,\\n lineHeight: '64px',\\n background: 'var(--semi-color-fill-0)'\\n };\\n return (\\n \\n
Header
\\n \\n Content\\n Sider\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Sidebar Layout\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout } from '@douyinfe/semi-ui';\\n\\n() => {\\n const { Header, Footer, Sider, Content } = Layout;\\n const commonStyle = {\\n height: 64,\\n lineHeight: '64px',\\n background: 'var(--semi-color-fill-0)'\\n };\\n return (\\n \\n Sider\\n \\n
Header
\\n Content\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Responsive Layout\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Six response sizes are preset in the sidebar: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"xs\"), \",\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"sm\"), \",\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md\"), \",\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"lg\"), \",\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"xl\"), \",\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"xxl\"), \". You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"breakpoint\"), \" to set breakpoints, and use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onBreakpoint\"), \" to call callback functions.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout } from '@douyinfe/semi-ui';\\n\\n() => {\\n const onbreakpoint = (screen, bool) => {\\n console.log(screen, bool);\\n };\\n const commonStyle = {\\n height: 64,\\n lineHeight: '64px',\\n background: 'var(--semi-color-fill-0)'\\n };\\n const { Header, Footer, Sider, Content } = Layout;\\n return (\\n \\n
Header
\\n \\n \\n Sider\\n \\n Content\\n \\n \\n \\n );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Layout Examples\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Top-nav Layout\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@douyinfe/semi-icons';\\n\\n() => {\\n const { Header, Footer, Content } = Layout;\\n return (\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n \\n )} loading={true}>\\n

Hi, Bytedance dance dance.

\\n

Hi, Bytedance dance dance.

\\n \\n \\n \\n \\n \\n \\n Copyright \\xA9 2019 ByteDance. All Rights Reserved. \\n \\n \\n Customer Service\\n Feedback\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Top-Nav SideBar Layout\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons';\\n\\n() => {\\n const { Header, Footer, Sider, Content } = Layout;\\n return (\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n },\\n { itemKey: 'Histogram', text: 'Histogram', icon: },\\n { itemKey: 'Live', text: 'Live', icon: },\\n { itemKey: 'Setting', text: 'Setting', icon: },\\n ]}\\n footer={{\\n collapseButton: true,\\n }}\\n />\\n \\n \\n \\n \\n )} loading={true}>\\n

Hi, Bytedance dance dance.

\\n

Hi, Bytedance dance dance.

\\n \\n \\n \\n \\n \\n \\n \\n Copyright \\xA9 2019 ByteDance. All Rights Reserved. \\n \\n \\n Customer Service\\n Feedback\\n \\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"SideBar Navigation\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';\\nimport { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting, IconSemiLogo } from '@douyinfe/semi-icons';\\n\\n() => {\\n const { Header, Footer, Sider, Content } = Layout;\\n return (\\n \\n \\n },\\n { itemKey: 'Histogram', text: 'Histogram', icon: },\\n { itemKey: 'Live', text: 'Live', icon: },\\n { itemKey: 'Setting', text: 'Setting', icon: },\\n ]}\\n header={{\\n logo: ,\\n text: 'Webcast'\\n }}\\n footer={{\\n collapseButton: true,\\n }}\\n />\\n \\n \\n
\\n \\n }\\n style={{\\n color: 'var(--semi-color-text-2)',\\n marginRight: '12px',\\n }}\\n />\\n }\\n style={{\\n color: 'var(--semi-color-text-2)',\\n marginRight: '12px',\\n }}\\n />\\n YJ\\n \\n }\\n >\\n \\n
\\n \\n \\n \\n )} loading={true}>\\n

Hi, Bytedance dance dance.

\\n

Hi, Bytedance dance dance.

\\n \\n \\n \\n \\n \\n \\n Copyright \\xA9 2019 ByteDance. All Rights Reserved. \\n \\n \\n Customer Service\\n Feedback\\n \\n \\n \\n \\n );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Layout\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Layout.Header\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Layout.Footer\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Layout.Content\"), \" use same API as \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Layout\"))), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), 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 }, \"Class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"hasSider\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indicates that there is a Sider in the child element, which is generally not specified. It can be used to avoid style flashing during SSR.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"aria-label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\"\n }, \"aria-label\"), \" attribute, used to label the current element Description, improve accessibility\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"role\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\"\n }, \"role\"), \" attribute to improve accessibility\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Layout.Sider\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"breakpoint\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Breakpoints that trigger responsive layout, one of 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"String[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\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 }, \"Class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), 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 }, \"Style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onBreakpoint\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when triggering a responsive layout breakpoint\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(screen: string, broken: bool) => 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 }, \"aria-label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\"\n }, \"aria-label\"), \" attribute, used to label the current element Description, improve accessibility\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"role\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\"\n }, \"role\"), \" attribute to improve accessibility\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"responsive map\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-text\"\n }, \"{\\n xs: '(max-width: 575px)',\\n sm: '(min-width: 576px)',\\n md: '(min-width: 768px)',\\n lg: '(min-width: 992px)',\\n xl: '(min-width: 1200px)',\\n xxl: '(min-width: 1600px)',\\n}\\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 }, \"Sider can pass in aria-label props to describe the function of this Sider.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Header Content Main Footer can pass in role aria-label to describe the function of the corresponding element.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Related Material\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"semi-material-list\", {\n code: \"2\"\n }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/basic/layout","next":{"fields":{"slug":"zh-CN/basic/layout"},"id":"0000c1d2-38f7-5831-91aa-1c987475c7f1","frontmatter":{"title":"Layout 布局","localeCode":"zh-CN","icon":"doc-layout","showNew":null}},"previous":{"fields":{"slug":"zh-CN/basic/tokens"},"id":"fee4ed17-9321-5c72-9cbb-83b1424bde8d","frontmatter":{"title":"Tokens 设计变量","localeCode":"zh-CN","icon":"doc-token","showNew":null}}}},"staticQueryHashes":["1348983216155057","1477422646155057","3245198693155057","417590761155057","63159454155057"]}