Layout 布局

协助进行页面级整体布局。

设计规则

尺寸

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

  • 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
  • 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
  • 顶部导航高度的范围计算公式为：48+8n。
  • 侧边导航宽度的范围计算公式：200+8n。

交互

  • 一级导航和末级的导航需要在可视化的层面被强调出来；
  • 当前项应该在呈现上优先级最高；
  • 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
  • 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

视觉

导航样式上需要根据信息层级合理的选择样式：

  • 大色块强调

    建议用于底色为深色系时，当前页面父级的导航项。

  • 高亮火柴棍

    当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。

  • 字体高亮变色

    从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。

  • 字体放大

    12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

组件概述

  • Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
  • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
  • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

注意：采用 flex 布局实现，请注意浏览器兼容性问题。

代码演示

基本结构

典型的页面布局。

Layout布局 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Layout } from 'choerodon-ui';
  4. ​
  5. const { Header, Footer, Sider, Content } = Layout;
  6. ​
  7. ReactDOM.render(
  8.   <div>
  9.     <Layout>
  10.       <Header>Header</Header>
  11.       <Content>Content</Content>
  12.       <Footer>Footer</Footer>
  13.     </Layout>
  14. ​
  15.     <Layout>
  16.       <Header>Header</Header>
  17.       <Layout>
  18.         <Sider>Sider</Sider>
  19.         <Content>Content</Content>
  20.       </Layout>
  21.       <Footer>Footer</Footer>
  22.     </Layout>
  23. ​
  24.     <Layout>
  25.       <Header>Header</Header>
  26.       <Layout>
  27.         <Content>Content</Content>
  28.         <Sider>Sider</Sider>
  29.       </Layout>
  30.       <Footer>Footer</Footer>
  31.     </Layout>
  32. ​
  33.     <Layout>
  34.       <Sider>Sider</Sider>
  35.       <Layout>
  36.         <Header>Header</Header>
  37.         <Content>Content</Content>
  38.         <Footer>Footer</Footer>
  39.       </Layout>
  40.     </Layout>
  41.   </div>,
  42.   document.getElementById('container'),
  43. );
  44. ​

上中下布局

最基本的『上-中-下』布局。

一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

Layout布局 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Layout, Menu, Breadcrumb } from 'choerodon-ui';
  4. ​
  5. const { Header, Content, Footer } = Layout;
  6. ​
  7. ReactDOM.render(
  8.   <Layout className="layout">
  9.     <Header>
  10.       <div className="logo" />
  11.       <Menu
  12.         theme="dark"
  13.         mode="horizontal"
  14.         defaultSelectedKeys={['2']}
  15.         style={{ lineHeight: '64px' }}
  16.       >
  17.         <Menu.Item key="1">nav 1</Menu.Item>
  18.         <Menu.Item key="2">nav 2</Menu.Item>
  19.         <Menu.Item key="3">nav 3</Menu.Item>
  20.       </Menu>
  21.     </Header>
  22.     <Content style={{ padding: '0 50px' }}>
  23.       <Breadcrumb style={{ margin: '16px 0' }}>
  24.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  25.         <Breadcrumb.Item>List</Breadcrumb.Item>
  26.         <Breadcrumb.Item>App</Breadcrumb.Item>
  27.       </Breadcrumb>
  28.       <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
  29.     </Content>
  30.     <Footer style={{ textAlign: 'center' }}>Choerodon UI</Footer>
  31.   </Layout>,
  32.   document.getElementById('container'),
  33. );
  34. ​

顶部-侧边布局-通栏

同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。

Layout布局 - 图3

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Layout, Menu, Breadcrumb, Icon } from 'choerodon-ui';
  5. ​
  6. const { SubMenu } = Menu;
  7. const { Header, Content, Sider } = Layout;
  8. ​
  9. ReactDOM.render(
  10.   <Layout>
  11.     <Header className="header">
  12.       <div className="logo" />
  13.       <Menu
  14.         theme="dark"
  15.         mode="horizontal"
  16.         defaultSelectedKeys={['2']}
  17.         style={{ lineHeight: '64px' }}
  18.       >
  19.         <Menu.Item key="1">nav 1</Menu.Item>
  20.         <Menu.Item key="2">nav 2</Menu.Item>
  21.         <Menu.Item key="3">nav 3</Menu.Item>
  22.       </Menu>
  23.     </Header>
  24.     <Layout>
  25.       <Sider width={200} style={{ background: '#fff' }}>
  26.         <Menu
  27.           mode="inline"
  28.           defaultSelectedKeys={['1']}
  29.           defaultOpenKeys={['sub1']}
  30.           style={{ height: '100%', borderRight: 0 }}
  31.         >
  32.           <SubMenu
  33.             key="sub1"
  34.             title={
  35.               <span>
  36.                 <Icon type="user" />
  37.                 subnav 1
  38.               </span>
  39.             }
  40.           >
  41.             <Menu.Item key="1">option1</Menu.Item>
  42.             <Menu.Item key="2">option2</Menu.Item>
  43.             <Menu.Item key="3">option3</Menu.Item>
  44.             <Menu.Item key="4">option4</Menu.Item>
  45.           </SubMenu>
  46.           <SubMenu
  47.             key="sub2"
  48.             title={
  49.               <span>
  50.                 <Icon type="laptop" />
  51.                 subnav 2
  52.               </span>
  53.             }
  54.           >

顶部-侧边布局

拥有顶部导航及侧边栏的页面，多用于展示类网站。

Layout布局 - 图4

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Layout, Menu, Breadcrumb, Icon } from 'choerodon-ui';
  5. ​
  6. const { SubMenu } = Menu;
  7. const { Header, Content, Footer, Sider } = Layout;
  8. ​
  9. ReactDOM.render(
  10.   <Layout>
  11.     <Header className="header">
  12.       <div className="logo" />
  13.       <Menu
  14.         theme="dark"
  15.         mode="horizontal"
  16.         defaultSelectedKeys={['2']}
  17.         style={{ lineHeight: '64px' }}
  18.       >
  19.         <Menu.Item key="1">nav 1</Menu.Item>
  20.         <Menu.Item key="2">nav 2</Menu.Item>
  21.         <Menu.Item key="3">nav 3</Menu.Item>
  22.       </Menu>
  23.     </Header>
  24.     <Content style={{ padding: '0 50px' }}>
  25.       <Breadcrumb style={{ margin: '16px 0' }}>
  26.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  27.         <Breadcrumb.Item>List</Breadcrumb.Item>
  28.         <Breadcrumb.Item>App</Breadcrumb.Item>
  29.       </Breadcrumb>
  30.       <Layout style={{ padding: '24px 0', background: '#fff' }}>
  31.         <Sider width={200} style={{ background: '#fff' }}>
  32.           <Menu
  33.             mode="inline"
  34.             defaultSelectedKeys={['1']}
  35.             defaultOpenKeys={['sub1']}
  36.             style={{ height: '100%' }}
  37.           >
  38.             <SubMenu
  39.               key="sub1"
  40.               title={
  41.                 <span>
  42.                   <Icon type="user" />
  43.                   subnav 1
  44.                 </span>
  45.               }
  46.             >
  47.               <Menu.Item key="1">option1</Menu.Item>
  48.               <Menu.Item key="2">option2</Menu.Item>
  49.               <Menu.Item key="3">option3</Menu.Item>
  50.               <Menu.Item key="4">option4</Menu.Item>
  51.             </SubMenu>
  52.             <SubMenu
  53.               key="sub2"
  54.               title={

侧边布局

侧边两列式布局。页面横向空间有限时，侧边导航可收起。

侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

Layout布局 - 图5

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Layout, Menu, Breadcrumb, Icon } from 'choerodon-ui';
  5. ​
  6. const { Header, Content, Footer, Sider } = Layout;
  7. const SubMenu = Menu.SubMenu;
  8. ​
  9. class SiderDemo extends React.Component {
  10.   state = {
  11.     collapsed: false,
  12.   };
  13. ​
  14.   onCollapse = collapsed => {
  15.     console.log(collapsed);
  16.     this.setState({ collapsed });
  17.   };
  18. ​
  19.   render() {
  20.     return (
  21.       <Layout style={{ minHeight: '100vh' }}>
  22.         <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
  23.           <div className="logo" />
  24.           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
  25.             <Menu.Item key="1">
  26.               <Icon type="pie-chart" />
  27.               <span>Option 1</span>
  28.             </Menu.Item>
  29.             <Menu.Item key="2">
  30.               <Icon type="desktop" />
  31.               <span>Option 2</span>
  32.             </Menu.Item>
  33.             <SubMenu
  34.               key="sub1"
  35.               title={
  36.                 <span>
  37.                   <Icon type="user" />
  38.                   <span>User</span>
  39.                 </span>
  40.               }
  41.             >
  42.               <Menu.Item key="3">Tom</Menu.Item>
  43.               <Menu.Item key="4">Bill</Menu.Item>
  44.               <Menu.Item key="5">Alex</Menu.Item>
  45.             </SubMenu>
  46.             <SubMenu
  47.               key="sub2"
  48.               title={
  49.                 <span>
  50.                   <Icon type="team" />
  51.                   <span>Team</span>
  52.                 </span>
  53.               }
  54.             >

自定义触发器

要使用自定义触发器，可以设置 trigger={null} 来隐藏默认设定。

Layout布局 - 图6

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Layout, Menu, Icon } from 'choerodon-ui';
  5. ​
  6. const { Header, Sider, Content } = Layout;
  7. ​
  8. class SiderDemo extends React.Component {
  9.   state = {
  10.     collapsed: false,
  11.   };
  12. ​
  13.   toggle = () => {
  14.     this.setState({
  15.       collapsed: !this.state.collapsed,
  16.     });
  17.   };
  18. ​
  19.   render() {
  20.     return (
  21.       <Layout>
  22.         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
  23.           <div className="logo" />
  24.           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
  25.             <Menu.Item key="1">
  26.               <Icon type="user" />
  27.               <span>nav 1</span>
  28.             </Menu.Item>
  29.             <Menu.Item key="2">
  30.               <Icon type="video-camera" />
  31.               <span>nav 2</span>
  32.             </Menu.Item>
  33.             <Menu.Item key="3">
  34.               <Icon type="upload" />
  35.               <span>nav 3</span>
  36.             </Menu.Item>
  37.           </Menu>
  38.         </Sider>
  39.         <Layout>
  40.           <Header style={{ background: '#fff', padding: 0 }}>
  41.             <Icon
  42.               className="trigger"
  43.               type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
  44.               onClick={this.toggle}
  45.             />
  46.           </Header>
  47.           <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
  48.             Content
  49.           </Content>
  50.         </Layout>
  51.       </Layout>
  52.     );
  53.   }
  54. }

响应式布局

Layout.Sider 支持响应式布局。

说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为零，会出现特殊 trigger。

Layout布局 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Layout, Menu, Icon } from 'choerodon-ui';
  4. ​
  5. const { Header, Content, Footer, Sider } = Layout;
  6. ​
  7. ReactDOM.render(
  8.   <Layout>
  9.     <Sider
  10.       breakpoint="lg"
  11.       collapsedWidth="0"
  12.       onCollapse={(collapsed, type) => {
  13.         console.log(collapsed, type);
  14.       }}
  15.     >
  16.       <div className="logo" />
  17.       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
  18.         <Menu.Item key="1">
  19.           <Icon type="user" />
  20.           <span className="nav-text">nav 1</span>
  21.         </Menu.Item>
  22.         <Menu.Item key="2">
  23.           <Icon type="video-camera" />
  24.           <span className="nav-text">nav 2</span>
  25.         </Menu.Item>
  26.         <Menu.Item key="3">
  27.           <Icon type="upload" />
  28.           <span className="nav-text">nav 3</span>
  29.         </Menu.Item>
  30.         <Menu.Item key="4">
  31.           <Icon type="user" />
  32.           <span className="nav-text">nav 4</span>
  33.         </Menu.Item>
  34.       </Menu>
  35.     </Sider>
  36.     <Layout>
  37.       <Header style={{ background: '#fff', padding: 0 }} />
  38.       <Content style={{ margin: '24px 16px 0' }}>
  39.         <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>content</div>
  40.       </Content>
  41.       <Footer style={{ textAlign: 'center' }}>Choerodon UI</Footer>
  42.     </Layout>
  43.   </Layout>,
  44.   document.getElementById('container'),
  45. );
  46. ​

固定头部

一般用于固定顶部导航，方便页面切换。

Layout布局 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Layout, Menu, Breadcrumb } from 'choerodon-ui';
  4. ​
  5. const { Header, Content, Footer } = Layout;
  6. ​
  7. ReactDOM.render(
  8.   <Layout>
  9.     <Header style={{ position: 'fixed', width: '100%' }}>
  10.       <div className="logo" />
  11.       <Menu
  12.         theme="dark"
  13.         mode="horizontal"
  14.         defaultSelectedKeys={['2']}
  15.         style={{ lineHeight: '64px' }}
  16.       >
  17.         <Menu.Item key="1">nav 1</Menu.Item>
  18.         <Menu.Item key="2">nav 2</Menu.Item>
  19.         <Menu.Item key="3">nav 3</Menu.Item>
  20.       </Menu>
  21.     </Header>
  22.     <Content style={{ padding: '0 50px', marginTop: 64 }}>
  23.       <Breadcrumb style={{ margin: '16px 0' }}>
  24.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  25.         <Breadcrumb.Item>List</Breadcrumb.Item>
  26.         <Breadcrumb.Item>App</Breadcrumb.Item>
  27.       </Breadcrumb>
  28.       <div style={{ background: '#fff', padding: 24, minHeight: 380 }}>Content</div>
  29.     </Content>
  30.     <Footer style={{ textAlign: 'center' }}>Choerodon UI</Footer>
  31.   </Layout>,
  32.   document.getElementById('container'),
  33. );
  34. ​

固定侧边栏

当内容较长时，使用固定侧边栏可以提供更好的体验。

Layout布局 - 图9

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Layout, Menu, Icon } from 'choerodon-ui';
  5. ​
  6. const { Header, Content, Footer, Sider } = Layout;
  7. ​
  8. ReactDOM.render(
  9.   <Layout>
  10.     <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }}>
  11.       <div className="logo" />
  12.       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
  13.         <Menu.Item key="1">
  14.           <Icon type="user" />
  15.           <span className="nav-text">nav 1</span>
  16.         </Menu.Item>
  17.         <Menu.Item key="2">
  18.           <Icon type="video-camera" />
  19.           <span className="nav-text">nav 2</span>
  20.         </Menu.Item>
  21.         <Menu.Item key="3">
  22.           <Icon type="upload" />
  23.           <span className="nav-text">nav 3</span>
  24.         </Menu.Item>
  25.         <Menu.Item key="4">
  26.           <Icon type="bar-chart" />
  27.           <span className="nav-text">nav 4</span>
  28.         </Menu.Item>
  29.         <Menu.Item key="5">
  30.           <Icon type="cloud-o" />
  31.           <span className="nav-text">nav 5</span>
  32.         </Menu.Item>
  33.         <Menu.Item key="6">
  34.           <Icon type="appstore-o" />
  35.           <span className="nav-text">nav 6</span>
  36.         </Menu.Item>
  37.         <Menu.Item key="7">
  38.           <Icon type="team" />
  39.           <span className="nav-text">nav 7</span>
  40.         </Menu.Item>
  41.         <Menu.Item key="8">
  42.           <Icon type="shop" />
  43.           <span className="nav-text">nav 8</span>
  44.         </Menu.Item>
  45.       </Menu>
  46.     </Sider>
  47.     <Layout style={{ marginLeft: 200 }}>
  48.       <Header style={{ background: '#fff', padding: 0 }} />
  49.       <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
  50.         <div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
  51.           ...
  52.           <br />
  53.           Really
  54.           <br />

API

  1. <Layout>
  2.   <Header>header</Header>
  3.   <Layout>
  4.     <Sider>left sidebar</Sider>
  5.     <Content>main content</Content>
  6.     <Sider>right sidebar</Sider>
  7.   </Layout>
  8.   <Footer>footer</Footer>
  9. </Layout>

Layout

布局容器。

参数说明类型默认值
className容器 classNamestring-
style指定样式object-
hasSider表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动boolean-

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

Layout.Sider

侧边栏。

参数说明类型默认值
breakpoint触发响应式布局的断点Enum { ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’ }-
className容器 classNamestring-
collapsed当前收起状态boolean-
collapsedWidth收缩宽度，设置为 0 会出现特殊 triggernumber64
collapsible是否可收起booleanfalse
defaultCollapsed是否默认收起booleanfalse
reverseArrow翻转折叠提示箭头的方向，当 Sider 在右边时可以使用booleanfalse
style指定样式object-
trigger自定义 trigger，设置为 null 时隐藏 triggerstring|ReactNode-
width宽度number|string200
onCollapse展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}-

breakpoint width

  1. {
  2.   xs: '480px',
  3.   sm: '576px',
  4.   md: '768px',
  5.   lg: '992px',
  6.   xl: '1200px',
  7.   xxl: '1600px',
  8. }