{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/layout","result":{"data":{"current":{"frontmatter":{"title":"Layout 布局","order":19,"brief":"用于快捷划分页面整体布局","icon":"doc-layout"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#概述","title":"概述"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#三行布局","title":"三行布局"},{"url":"#左侧边栏布局","title":"左侧边栏布局"},{"url":"#右侧边栏布局","title":"右侧边栏布局"},{"url":"#侧边栏布局","title":"侧边栏布局"},{"url":"#响应式布局","title":"响应式布局"}]},{"url":"#布局示例","title":"布局示例","items":[{"url":"#顶部导航布局","title":"顶部导航布局"},{"url":"#顶部导航-侧边布局","title":"顶部导航-侧边布局"},{"url":"#侧边导航","title":"侧边导航"}]},{"url":"#api-参考","title":"API 参考","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":"#相关物料","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\": 19,\n  \"category\": \"基础\",\n  \"title\": \"Layout 布局\",\n  \"icon\": \"doc-layout\",\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 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  }, \"\\u6982\\u8FF0\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Layout\"), \"\\uFF1A\\u5E03\\u5C40\\u5BB9\\u5668\\uFF0C\\u5176\\u4E0B\\u53EF\\u5D4C\\u5957 \", 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\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Layout\"), \" \\u672C\\u8EAB\\uFF0C\\u53EF\\u4EE5\\u653E\\u5728\\u4EFB\\u4F55\\u7236\\u5BB9\\u5668\\u4E2D\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Header\"), \"\\uFF1A\\u9876\\u90E8\\u5E03\\u5C40\\uFF0C\\u5176\\u4E0B\\u53EF\\u5D4C\\u5957\\u4EFB\\u4F55\\u5143\\u7D20\\uFF0C\\u53EA\\u80FD\\u653E\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Layout\"), \" \\u4E2D\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Sider\"), \"\\uFF1A\\u4FA7\\u8FB9\\u680F\\uFF0C\\u5176\\u4E0B\\u53EF\\u5D4C\\u5957\\u4EFB\\u4F55\\u5143\\u7D20\\uFF0C\\u53EA\\u80FD\\u653E\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Layout\"), \" \\u4E2D\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Content\"), \"\\uFF1A\\u5185\\u5BB9\\u90E8\\u5206\\uFF0C\\u5176\\u4E0B\\u53EF\\u5D4C\\u5957\\u4EFB\\u4F55\\u5143\\u7D20\\uFF0C\\u53EA\\u80FD\\u653E\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Layout\"), \" \\u4E2D\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Footer\"), \"\\uFF1A\\u5E95\\u90E8\\u5E03\\u5C40\\uFF0C\\u5176\\u4E0B\\u53EF\\u5D4C\\u5957\\u4EFB\\u4F55\\u5143\\u7D20\\uFF0C\\u53EA\\u80FD\\u653E\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Layout\"), \" \\u4E2D\\u3002\")), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"1\\u3001\\u5E03\\u5C40\\u7EC4\\u4EF6\\u91C7\\u7528 Flex \\u5E03\\u5C40\\u5B9E\\u73B0\\uFF0C\\u65E0\\u6CD5\\u5728\\u975E\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\\u4E2D\\u5DE5\\u4F5C  \", mdx(\"br\", null), \"2\\u3001Layout \\u7EC4\\u4EF6\\u4EC5\\u4F1A\\u5E2E\\u4F60\\u5B9E\\u73B0\\u5E03\\u5C40\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u9644\\u5E26\\u80CC\\u666F\\u8272\\u3001\\u6587\\u672C\\u8272\\u3001\\u5BBD\\u9AD8\\u5EA6\\u7B49\\u6837\\u5F0F\\u3002\\u4F60\\u53EF\\u4EE5\\u6839\\u636E\\u81EA\\u5DF1\\u5B9E\\u9645\\u9700\\u6C42\\u4F20\\u5165 style \\u6216\\u7ED9\\u5B9A\\u7279\\u5B9A className \\u53E6\\u884C\\u7F16\\u5199css\\u5B9E\\u73B0\")), 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 { Layout } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E09\\u884C\\u5E03\\u5C40\"), 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        <Layout className=\\\"components-layout-demo\\\">\\n            <Header style={commonStyle}>Header</Header>\\n            <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>\\n            <Footer style={commonStyle}>Footer</Footer>\\n        </Layout>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5DE6\\u4FA7\\u8FB9\\u680F\\u5E03\\u5C40\"), 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        <Layout className=\\\"components-layout-demo\\\">\\n            <Header style={commonStyle}>Header</Header>\\n            <Layout>\\n                <Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>\\n                <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>\\n            </Layout>\\n            <Footer style={commonStyle}>Footer</Footer>\\n        </Layout>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53F3\\u4FA7\\u8FB9\\u680F\\u5E03\\u5C40\"), 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        <Layout className=\\\"components-layout-demo\\\">\\n            <Header style={commonStyle}>Header</Header>\\n            <Layout>\\n                <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>\\n                <Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>\\n            </Layout>\\n            <Footer style={commonStyle}>Footer</Footer>\\n        </Layout>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u680F\\u5E03\\u5C40\"), 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        <Layout className=\\\"components-layout-demo\\\">\\n            <Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>\\n            <Layout>\\n                <Header style={commonStyle}>Header</Header>\\n                <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>\\n                <Footer style={commonStyle}>Footer</Footer>\\n            </Layout>\\n        </Layout>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u54CD\\u5E94\\u5F0F\\u5E03\\u5C40\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u680F\\u9884\\u8BBE\\u4E86\\u516D\\u4E2A\\u54CD\\u5E94\\u5C3A\\u5BF8\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xs\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sm\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lg\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xl\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xxl\"), \"\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"breakpoint\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u65AD\\u70B9\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onBreakpoint\"), \" \\u8C03\\u7528\\u56DE\\u8C03\\u51FD\\u6570\\u3002\"), 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        <Layout className=\\\"components-layout-demo\\\">\\n            <Header style={commonStyle}>Header</Header>\\n            <Layout>\\n                <Sider\\n                    style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}\\n                    breakpoint={['md']}\\n                    onBreakpoint={onbreakpoint}\\n                >\\n                    Sider\\n                </Sider>\\n                <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>\\n            </Layout>\\n            <Footer style={commonStyle}>Footer</Footer>\\n        </Layout>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5E03\\u5C40\\u793A\\u4F8B\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9876\\u90E8\\u5BFC\\u822A\\u5E03\\u5C40\"), 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        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>\\n            <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                <div>\\n                    <Nav mode=\\\"horizontal\\\" defaultSelectedKeys={['Home']}>\\n                        <Nav.Header>\\n                            <IconSemiLogo style={{ fontSize: 36 }} />\\n                        </Nav.Header>\\n                        <Nav.Item itemKey=\\\"Home\\\" text=\\\"\\u9996\\u9875\\\" icon={<IconHome size=\\\"large\\\" />} />\\n                        <Nav.Item itemKey=\\\"Live\\\" text=\\\"\\u76F4\\u64AD\\\" icon={<IconLive size=\\\"large\\\" />} />\\n                        <Nav.Item itemKey=\\\"Setting\\\" text=\\\"\\u8BBE\\u7F6E\\\" icon={<IconSetting size=\\\"large\\\" />} />\\n                        <Nav.Footer>\\n                            <Button\\n                                theme=\\\"borderless\\\"\\n                                icon={<IconBell size=\\\"large\\\" />}\\n                                style={{\\n                                    color: 'var(--semi-color-text-2)',\\n                                    marginRight: '12px',\\n                                }}\\n                            />\\n                            <Button\\n                                theme=\\\"borderless\\\"\\n                                icon={<IconHelpCircle size=\\\"large\\\" />}\\n                                style={{\\n                                    color: 'var(--semi-color-text-2)',\\n                                    marginRight: '12px',\\n                                }}\\n                            />\\n                            <Avatar color=\\\"orange\\\" size=\\\"small\\\">\\n                                YJ\\n                            </Avatar>\\n                        </Nav.Footer>\\n                    </Nav>\\n                </div>\\n            </Header>\\n            <Content\\n                style={{\\n                    padding: '24px',\\n                    backgroundColor: 'var(--semi-color-bg-0)',\\n                }}\\n            >\\n                <Breadcrumb\\n                    style={{\\n                        marginBottom: '24px',\\n                    }}\\n                    routes={['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u4E0A\\u4E00\\u9875', '\\u8BE6\\u60C5\\u9875']}\\n                />\\n                <div\\n                    style={{\\n                        borderRadius: '10px',\\n                        border: '1px solid var(--semi-color-border)',\\n                        height: '376px',\\n                        padding: '32px',\\n                    }}\\n                >\\n                    <Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}>\\n                        <p>Hi, Bytedance dance dance.</p>\\n                        <p>Hi, Bytedance dance dance.</p>\\n                    </Skeleton>\\n                </div>\\n            </Content>\\n            <Footer\\n                style={{\\n                    display: 'flex',\\n                    justifyContent: 'space-between',\\n                    padding: '20px',\\n                    color: 'var(--semi-color-text-2)',\\n                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',\\n                }}\\n            >\\n                <span\\n                    style={{\\n                        display: 'flex',\\n                        alignItems: 'center',\\n                    }}\\n                >\\n                    <IconBytedanceLogo size=\\\"large\\\" style={{ marginRight: '8px' }} />\\n                    <span>Copyright \\xA9 2023 ByteDance. All Rights Reserved. </span>\\n                </span>\\n                <span>\\n                    <span style={{ marginRight: '24px' }}>\\u5E73\\u53F0\\u5BA2\\u670D</span>\\n                    <span>\\u53CD\\u9988\\u5EFA\\u8BAE</span>\\n                </span>\\n            </Footer>\\n        </Layout>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9876\\u90E8\\u5BFC\\u822A-\\u4FA7\\u8FB9\\u5E03\\u5C40\"), 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        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>\\n            <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                <div>\\n                    <Nav mode=\\\"horizontal\\\" defaultSelectedKeys={['Home']}>\\n                        <Nav.Header>\\n                            <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />\\n                        </Nav.Header>\\n                        <span\\n                            style={{\\n                                color: 'var(--semi-color-text-2)',\\n                            }}\\n                        >\\n                            <span\\n                                style={{\\n                                    marginRight: '24px',\\n                                    color: 'var(--semi-color-text-0)',\\n                                    fontWeight: '600',\\n                                }}\\n                            >\\n                                \\u6A21\\u7248\\u63A8\\u8350\\n                            </span>\\n                            <span style={{ marginRight: '24px' }}>\\u6240\\u6709\\u6A21\\u7248</span>\\n                            <span>\\u6211\\u7684\\u6A21\\u7248</span>\\n                        </span>\\n                        <Nav.Footer>\\n                            <Button\\n                                theme=\\\"borderless\\\"\\n                                icon={<IconBell size=\\\"large\\\" />}\\n                                style={{\\n                                    color: 'var(--semi-color-text-2)',\\n                                    marginRight: '12px',\\n                                }}\\n                            />\\n                            <Button\\n                                theme=\\\"borderless\\\"\\n                                icon={<IconHelpCircle size=\\\"large\\\" />}\\n                                style={{\\n                                    color: 'var(--semi-color-text-2)',\\n                                    marginRight: '12px',\\n                                }}\\n                            />\\n                            <Avatar color=\\\"orange\\\" size=\\\"small\\\">\\n                                YJ\\n                            </Avatar>\\n                        </Nav.Footer>\\n                    </Nav>\\n                </div>\\n            </Header>\\n            <Layout>\\n                <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                    <Nav\\n                        style={{ maxWidth: 220, height: '100%' }}\\n                        defaultSelectedKeys={['Home']}\\n                        items={[\\n                            { itemKey: 'Home', text: '\\u9996\\u9875', icon: <IconHome size=\\\"large\\\" /> },\\n                            { itemKey: 'Histogram', text: '\\u57FA\\u7840\\u6570\\u636E', icon: <IconHistogram size=\\\"large\\\" /> },\\n                            { itemKey: 'Live', text: '\\u6D4B\\u8BD5\\u529F\\u80FD', icon: <IconLive size=\\\"large\\\" /> },\\n                            { itemKey: 'Setting', text: '\\u8BBE\\u7F6E', icon: <IconSetting size=\\\"large\\\" /> },\\n                        ]}\\n                        footer={{\\n                            collapseButton: true,\\n                        }}\\n                    />\\n                </Sider>\\n                <Content\\n                    style={{\\n                        padding: '24px',\\n                        backgroundColor: 'var(--semi-color-bg-0)',\\n                    }}\\n                >\\n                    <Breadcrumb\\n                        style={{\\n                            marginBottom: '24px',\\n                        }}\\n                        routes={['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u4E0A\\u4E00\\u9875', '\\u8BE6\\u60C5\\u9875']}\\n                    />\\n                    <div\\n                        style={{\\n                            borderRadius: '10px',\\n                            border: '1px solid var(--semi-color-border)',\\n                            height: '376px',\\n                            padding: '32px',\\n                        }}\\n                    >\\n                        <Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}>\\n                            <p>Hi, Bytedance dance dance.</p>\\n                            <p>Hi, Bytedance dance dance.</p>\\n                        </Skeleton>\\n                    </div>\\n                </Content>\\n            </Layout>\\n            <Footer\\n                style={{\\n                    display: 'flex',\\n                    justifyContent: 'space-between',\\n                    padding: '20px',\\n                    color: 'var(--semi-color-text-2)',\\n                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',\\n                }}\\n            >\\n                <span\\n                    style={{\\n                        display: 'flex',\\n                        alignItems: 'center',\\n                    }}\\n                >\\n                    <IconBytedanceLogo size=\\\"large\\\" style={{ marginRight: '8px' }} />\\n                    <span>Copyright \\xA9 2023 ByteDance. All Rights Reserved. </span>\\n                </span>\\n                <span>\\n                    <span style={{ marginRight: '24px' }}>\\u5E73\\u53F0\\u5BA2\\u670D</span>\\n                    <span>\\u53CD\\u9988\\u5EFA\\u8BAE</span>\\n                </span>\\n            </Footer>\\n        </Layout>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4FA7\\u8FB9\\u5BFC\\u822A\"), 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        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>\\n            <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                <Nav\\n                    defaultSelectedKeys={['Home']}\\n                    style={{ maxWidth: 220, height: '100%' }}\\n                    items={[\\n                        { itemKey: 'Home', text: '\\u9996\\u9875', icon: <IconHome size=\\\"large\\\" /> },\\n                        { itemKey: 'Histogram', text: '\\u57FA\\u7840\\u6570\\u636E', icon: <IconHistogram size=\\\"large\\\" /> },\\n                        { itemKey: 'Live', text: '\\u6D4B\\u8BD5\\u529F\\u80FD', icon: <IconLive size=\\\"large\\\" /> },\\n                        { itemKey: 'Setting', text: '\\u8BBE\\u7F6E', icon: <IconSetting size=\\\"large\\\" /> },\\n                    ]}\\n                    header={{\\n                        logo: <IconSemiLogo style={{ fontSize: 36 }} />,\\n                        text: 'Semi Design',\\n                    }}\\n                    footer={{\\n                        collapseButton: true,\\n                    }}\\n                />\\n            </Sider>\\n            <Layout>\\n                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                    <Nav\\n                        mode=\\\"horizontal\\\"\\n                        footer={\\n                            <>\\n                                <Button\\n                                    theme=\\\"borderless\\\"\\n                                    icon={<IconBell size=\\\"large\\\" />}\\n                                    style={{\\n                                        color: 'var(--semi-color-text-2)',\\n                                        marginRight: '12px',\\n                                    }}\\n                                />\\n                                <Button\\n                                    theme=\\\"borderless\\\"\\n                                    icon={<IconHelpCircle size=\\\"large\\\" />}\\n                                    style={{\\n                                        color: 'var(--semi-color-text-2)',\\n                                        marginRight: '12px',\\n                                    }}\\n                                />\\n                                <Avatar color=\\\"orange\\\" size=\\\"small\\\">\\n                                    YJ\\n                                </Avatar>\\n                            </>\\n                        }\\n                    ></Nav>\\n                </Header>\\n                <Content\\n                    style={{\\n                        padding: '24px',\\n                        backgroundColor: 'var(--semi-color-bg-0)',\\n                    }}\\n                >\\n                    <Breadcrumb\\n                        style={{\\n                            marginBottom: '24px',\\n                        }}\\n                        routes={['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u4E0A\\u4E00\\u9875', '\\u8BE6\\u60C5\\u9875']}\\n                    />\\n                    <div\\n                        style={{\\n                            borderRadius: '10px',\\n                            border: '1px solid var(--semi-color-border)',\\n                            height: '376px',\\n                            padding: '32px',\\n                        }}\\n                    >\\n                        <Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}>\\n                            <p>Hi, Bytedance dance dance.</p>\\n                            <p>Hi, Bytedance dance dance.</p>\\n                        </Skeleton>\\n                    </div>\\n                </Content>\\n                <Footer\\n                    style={{\\n                        display: 'flex',\\n                        justifyContent: 'space-between',\\n                        padding: '20px',\\n                        color: 'var(--semi-color-text-2)',\\n                        backgroundColor: 'rgba(var(--semi-grey-0), 1)',\\n                    }}\\n                >\\n                    <span\\n                        style={{\\n                            display: 'flex',\\n                            alignItems: 'center',\\n                        }}\\n                    >\\n                        <IconBytedanceLogo size=\\\"large\\\" style={{ marginRight: '8px' }} />\\n                        <span>Copyright \\xA9 2019 ByteDance. All Rights Reserved. </span>\\n                    </span>\\n                    <span>\\n                        <span style={{ marginRight: '24px' }}>\\u5E73\\u53F0\\u5BA2\\u670D</span>\\n                        <span>\\u53CD\\u9988\\u5EFA\\u8BAE</span>\\n                    </span>\\n                </Footer>\\n            </Layout>\\n        </Layout>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), 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\"), \" API \\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Layout\"), \" \\u76F8\\u540C\")), 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(\"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  }, \"\\u7C7B\\u540D\"), 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  }, \"\\u8868\\u793A\\u5B50\\u5143\\u7D20\\u91CC\\u6709 Sider\\uFF0C\\u4E00\\u822C\\u4E0D\\u7528\\u6307\\u5B9A\\u3002\\u53EF\\u7528\\u4E8E\\u670D\\u52A1\\u7AEF\\u6E32\\u67D3\\u65F6\\u907F\\u514D\\u6837\\u5F0F\\u95EA\\u52A8\"), 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  }, \"\\u6837\\u5F0F\"), 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\"), \" \\u5C5E\\u6027\\uFF0C\\u7528\\u6765\\u7ED9\\u5F53\\u524D\\u5143\\u7D20\\u52A0\\u4E0A\\u7684\\u6807\\u7B7E\\u63CF\\u8FF0, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027 >=2.3.0\"), 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\"), \" \\u5C5E\\u6027, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027 >=2.3.0\"), 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  }, \"\\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(\"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  }, \"\\u89E6\\u53D1\\u54CD\\u5E94\\u5F0F\\u5E03\\u5C40\\u7684\\u65AD\\u70B9\\uFF0C\\u53EF\\u9009\\u503C'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  }, \"\\u7C7B\\u540D\"), 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  }, \"\\u6837\\u5F0F\"), 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  }, \"\\u89E6\\u53D1\\u54CD\\u5E94\\u5F0F\\u5E03\\u5C40\\u65AD\\u70B9\\u65F6\\u7684\\u56DE\\u8C03\"), 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\"), \"\\u5C5E\\u6027\\uFF0C\\u7528\\u6765\\u7ED9\\u5F53\\u524D\\u5143\\u7D20\\u52A0\\u4E0A\\u7684\\u6807\\u7B7E\\u63CF\\u8FF0, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027 >=2.3.0\"), 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\"), \"\\u5C5E\\u6027, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027 >=2.3.0\"), 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 \\u53EF\\u4F20\\u5165 aria-label props\\uFF0C\\u63CF\\u8FF0\\u8BE5 Sider \\u4F5C\\u7528\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Header Content Main Footer \\u53EF\\u4F20\\u5165 role aria-label \\u63CF\\u8FF0\\u5BF9\\u5E94\\u5143\\u7D20\\u4F5C\\u7528\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"2\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/layout","next":{"fields":{"slug":"en-US/basic/grid"},"id":"7443dedd-19a9-532e-b90a-b07ef6436651","frontmatter":{"title":"Grid","localeCode":"en-US","icon":"doc-grid","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/layout"},"id":"36809e3d-f8c8-5242-a8bc-2f2c741e1c7f","frontmatter":{"title":"Layout","localeCode":"en-US","icon":"doc-layout","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}