--- localeCode: zh-CN order: 19 category: 基础 title: Layout 布局 icon: doc-layout dir: column brief: 用于快捷划分页面整体布局 --- ## 概述 - `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。 - `Header`：顶部布局，其下可嵌套任何元素，只能放在 `Layout` 中。 - `Sider`：侧边栏，其下可嵌套任何元素，只能放在 `Layout` 中。 - `Content`：内容部分，其下可嵌套任何元素，只能放在 `Layout` 中。 - `Footer`：底部布局，其下可嵌套任何元素，只能放在 `Layout` 中。 1、布局组件采用 Flex 布局实现，无法在非现代浏览器中工作
2、Layout 组件仅会帮你实现布局，但不会附带背景色、文本色、宽高度等样式。你可以根据自己实际需求传入 style 或给定特定 className 另行编写css实现 ## 代码演示 ### 如何引入 ```jsx import import { Layout } from '@douyinfe/semi-ui'; ``` ### 三行布局 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Content } = Layout; const commonStyle = { height: 64, lineHeight: '64px', background: 'var(--semi-color-fill-0)' }; return (
Header
Content ); }; ``` ### 左侧边栏布局 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Sider, Content } = Layout; const commonStyle = { height: 64, lineHeight: '64px', background: 'var(--semi-color-fill-0)' }; return (
Header
Sider Content ); }; ``` ### 右侧边栏布局 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Sider, Content } = Layout; const commonStyle = { height: 64, lineHeight: '64px', background: 'var(--semi-color-fill-0)' }; return (
Header
Content Sider ); }; ``` ### 侧边栏布局 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const { Header, Footer, Sider, Content } = Layout; const commonStyle = { height: 64, lineHeight: '64px', background: 'var(--semi-color-fill-0)' }; return ( Sider
Header
Content ); }; ``` ### 响应式布局 侧边栏预设了六个响应尺寸：`xs`、`sm`、`md`、`lg`、`xl`、`xxl`。可以通过设置 `breakpoint` 属性设置断点，通过 `onBreakpoint` 调用回调函数。 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout } from '@douyinfe/semi-ui'; () => { const onbreakpoint = (screen, bool) => { console.log(screen, bool); }; const commonStyle = { height: 64, lineHeight: '64px', background: 'var(--semi-color-fill-0)' }; const { Header, Footer, Sider, Content } = Layout; return (
Header
Sider Content ); }; ``` ## 布局示例 ### 顶部导航布局 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui'; import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconLive, IconSetting } from '@douyinfe/semi-icons'; () => { const { Header, Footer, Content } = Layout; return (
} loading={true}>

Hi, Bytedance dance dance.

Hi, Bytedance dance dance.
); }; ``` ### 顶部导航-侧边布局 ```jsx live=true dir="column" hideInDSM import React from 'react'; import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui'; import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons'; () => { const { Header, Footer, Sider, Content } = Layout; return (