• Layout 布局

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

    设计规则

    尺寸

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

    交互

    视觉

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

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

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

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

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

    组件概述

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

    代码演示

    典型的页面布局。
    expand code expand code
    import { Layout } from 'choerodon-ui';
    const { Header, Footer, Sider, Content } = Layout;
    
    ReactDOM.render(
      <div>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
    
        <Layout>
          <Header>Header</Header>
          <Layout>
            <Sider>Sider</Sider>
            <Content>Content</Content>
          </Layout>
          <Footer>Footer</Footer>
        </Layout>
    
        <Layout>
          <Header>Header</Header>
          <Layout>
            <Content>Content</Content>
            <Sider>Sider</Sider>
          </Layout>
          <Footer>Footer</Footer>
        </Layout>
    
        <Layout>
          <Sider>Sider</Sider>
          <Layout>
            <Header>Header</Header>
            <Content>Content</Content>
            <Footer>Footer</Footer>
          </Layout>
        </Layout>
      </div>,
      mountNode);
    

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

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

    expand code expand code
    import { Layout, Menu, Breadcrumb } from 'choerodon-ui';
    const { Header, Content, Footer } = Layout;
    
    ReactDOM.render(
      <Layout className="layout">
        <Header>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Choerodon ©2018 Created
        </Footer>
      </Layout>,
      mountNode);
    
    同样拥有顶部导航及侧边栏,区别是两边未留边距,多用于应用型的网站。
    expand code expand code
    import { Layout, Menu, Breadcrumb, Icon } from 'choerodon-ui';
    const { SubMenu } = Menu;
    const { Header, Content, Sider } = Layout;
    
    ReactDOM.render(
      <Layout>
        <Header className="header">
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
                <Menu.Item key="1">option1</Menu.Item>
                <Menu.Item key="2">option2</Menu.Item>
                <Menu.Item key="3">option3</Menu.Item>
                <Menu.Item key="4">option4</Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
                <Menu.Item key="5">option5</Menu.Item>
                <Menu.Item key="6">option6</Menu.Item>
                <Menu.Item key="7">option7</Menu.Item>
                <Menu.Item key="8">option8</Menu.Item>
              </SubMenu>
              <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
                <Menu.Item key="9">option9</Menu.Item>
                <Menu.Item key="10">option10</Menu.Item>
                <Menu.Item key="11">option11</Menu.Item>
                <Menu.Item key="12">option12</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
              Content
            </Content>
          </Layout>
        </Layout>
      </Layout>,
      mountNode);
    
    拥有顶部导航及侧边栏的页面,多用于展示类网站。
    expand code expand code
    import { Layout, Menu, Breadcrumb } from 'choerodon-ui';
    const { Header, Content, Footer } = Layout;
    
    ReactDOM.render(
      <Layout className="layout">
        <Header>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Choerodon ©2018 Created
        </Footer>
      </Layout>,
      mountNode);
    
    要使用自定义触发器,可以设置 trigger={null} 来隐藏默认设定。
    expand code expand code
    import { Layout, Menu, Icon } from 'choerodon-ui';
    const { Header, Sider, Content } = Layout;
    
    class SiderDemo extends React.Component {
      state = {
        collapsed: false,
      };
    
      toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        });
      }
    
      render() {
        return (
          <Layout>
            <Sider
              trigger={null}
              collapsible
              collapsed={this.state.collapsed}
            >
              <div className="logo" />
              <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                <Menu.Item key="1">
                  <Icon type="user" />
                  <span>nav 1</span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="video-camera" />
                  <span>nav 2</span>
                </Menu.Item>
                <Menu.Item key="3">
                  <Icon type="upload" />
                  <span>nav 3</span>
                </Menu.Item>
              </Menu>
            </Sider>
            <Layout>
              <Header style={{ background: '#fff', padding: 0 }}>
                <Icon
                  className="trigger"
                  type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                  onClick={this.toggle}
                />
              </Header>
              <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                Content
              </Content>
            </Layout>
          </Layout>
        );
      }
    }
    
    ReactDOM.render(<SiderDemo />, mountNode);
    

    Layout.Sider 支持响应式布局。

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

    expand code expand code
    import { Layout, Menu, Icon } from 'choerodon-ui';
    const { Header, Content, Footer, Sider } = Layout;
    
    ReactDOM.render(
      <Layout>
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span className="nav-text">nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span className="nav-text">nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span className="nav-text">nav 3</span>
            </Menu.Item>
            <Menu.Item key="4">
              <Icon type="user" />
              <span className="nav-text">nav 4</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} />
          <Content style={{ margin: '24px 16px 0' }}>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              content
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Choerodon ©2018 Created
          </Footer>
        </Layout>
      </Layout>,
      mountNode);
    

    API

    <Layout>
      <Header>header</Header>
      <Layout>
        <Sider>left sidebar</Sider>
        <Content>main content</Content>
        <Sider>right sidebar</Sider>
      </Layout>
      <Footer>footer</Footer>
    </Layout>
    

    Layout

    布局容器。

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

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

    Layout.Sider

    侧边栏。

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

    breakpoint width

    {
      xs: '480px',
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1600px',
    }