Layout 页面布局

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/layout@1.0.8 -S

提供页面框架性的 Layout 以及基础区块布局，除了 Layout.Main 必须以外, 其它的组件在页面中可以按需自由搭配使用。

Layout

import Layout from '@icedesign/layout';

页面布局，一个页面有且只能有一个 Layout 组件。

参数（props）

参数名说明类型默认值
fixable开启布局模块滚动跟随模式booleanfalse

fixable 一旦设置为 true 则整个页面所有模块都固定高度，内容区域不可滚动。子组件通过 scrollable props 使其可滚动，以此实现主体内容滚动，其余模块 fixed 的效果。

Layout.Section

辅助布局组件，会创建 100% 宽度的一整行。当某一块区域需要两个模块左右排列，则需要使用 Layout.Section 组件包裹。

如：

  1. <Layout.Section>
  2.   <Layout.Aside />
  3.   <Layout.Main />
  4. </Layout.Section>

参数（props）

参数名说明类型默认值
scrollable区域可滚动 (<Layout fixable={true} /> 下可用)booleanfalse

Layout.Header

顶部布局，默认 flex 布局，并且内部元素垂直居中对齐，可通过 style 属性修改。

参数（props）

参数名说明类型默认值
type配置皮肤色stringnormal
  • type: none(继承父元素的背景色), normal，primary，secondary

Layout.Aside

侧边栏，根据嵌套顺序，可左右布局。

参数（props）

参数名说明类型默认值
type配置Aside 皮肤色string-

Layout.Main

参数（props）

参数名说明类型默认值
scrollable区域可滚动 (<Layout fixable={true} /> 下可用)booleanfalse

主体内容。

页脚布局。

参数（props）

参数名说明类型默认值
type配置Aside 皮肤色string-

代码示例

基本结构

基础组件 Header Main Footer，默认宽度都是 100%。当需要侧边栏 Aside 组件，需要使用辅助布局组件 Section 包裹起来。通过各组件的先后顺序实现多样性布局。

Layout 页面布局 - 图1

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Layout from '@icedesign/layout';
  5. class App extends Component {
  6.   render() {
  7.     return (
  8.       <div>
  9.         <Layout>
  10.           <Layout.Header style={{
  11.             height: 80,
  12.           }} type="secondary">header</Layout.Header>
  13.           <Layout.Main style={{height: 200, background: '#fff'}}>Main</Layout.Main>
  14.           <Layout.Footer style={{
  15.             height: 80,
  16.           }} type="secondary">Footer</Layout.Footer>
  17.         </Layout>
  19.         <div style={{height: 20}}></div>
  21.         <Layout>
  22.           <Layout.Header style={{
  23.             height: 80,
  24.           }} type="secondary">header</Layout.Header>
  25.           <Layout.Section>
  26.             <Layout.Aside style={{
  27.               width: 80,
  28.             }} type="secondary">Aside</Layout.Aside>
  29.             <Layout.Main style={{height: 200, background: '#fff'}}>Main</Layout.Main>
  30.           </Layout.Section>
  31.           <Layout.Footer style={{
  32.             height: 80,
  33.           }} type="secondary">Footer</Layout.Footer>
  34.         </Layout>
  36.         <div style={{height: 20}}></div>
  38.         <Layout>
  39.           <Layout.Header style={{
  40.             height: 80,
  41.           }} type="secondary">header</Layout.Header>
  42.           <Layout.Section style={{ padding: '20px 40px' }}>
  43.             <Layout.Aside style={{
  44.               width: 80,
  45.             }} type="secondary" >Aside</Layout.Aside>
  46.             <Layout.Main style={{height: 200, background: '#fff'}}>Main</Layout.Main>
  47.           </Layout.Section>
  48.           <Layout.Footer style={{
  49.             height: 80,
  50.           }} type="secondary">Footer</Layout.Footer>
  51.         </Layout>
  53.         <div style={{height: 20}}></div>
  55.         <Layout>
  56.           <Layout.Header style={{
  57.             height: 80,
  58.           }} type="secondary">header</Layout.Header>
  59.           <Layout.Section>
  60.             <Layout.Aside style={{
  61.               width: 80,
  62.             }} type="secondary">Aside</Layout.Aside>
  63.             <Layout.Main style={{height: 500, background: '#fff'}}>Main</Layout.Main>
  64.             <Layout.Aside style={{
  65.               width: 80,
  66.             }} type="secondary">Aside</Layout.Aside>
  67.           </Layout.Section>
  68.           <Layout.Footer style={{
  69.             height: 80,
  70.           }} type="secondary">Footer</Layout.Footer>
  71.         </Layout>
  73.         <div style={{height: 20}}></div>
  75.         <Layout>
  76.           <Layout.Aside style={{
  77.             width: 80,
  78.           }} type="secondary">Aside</Layout.Aside>
  79.           <Layout.Section>
  80.             <Layout.Header style={{
  81.               height: 80,
  82.             }} type="secondary">header</Layout.Header>
  83.             <Layout.Main style={{
  84.               height: 200, background: '#fff'
  85.             }}>Main</Layout.Main>
  86.             <Layout.Footer style={{
  87.               height: 80,
  88.             }} type="secondary">Footer</Layout.Footer>
  89.           </Layout.Section>
  90.         </Layout>
  91.       </div>
  92.     );
  93.   }
  94. }
  96. ReactDOM.render(<App />, mountNode);
  1. .ice-layout {
  2.   color: #fff;
  3.   text-align: center;
  4.   margin-bottom: 50px;
  5.   background-color: #eee;
  6. }
  7. .ice-layout-header {
  8.   line-height: 50px;
  9.   background-color: rgba(27, 115, 225, 0.5) !important;;
  10. }
  11. .ice-layout-aside {
  12.   line-height: 120px;
  13.   background-color: rgba(27, 115, 225, 0.7) !important;;
  14. }
  15. .ice-layout-main {
  16.   line-height: 120px;
  17.   background-color: rgba(27, 115, 225, 1);
  18. }
  19. .ice-layout-footer {
  20.   line-height: 50px;
  21.   background-color: rgba(27, 115, 225, 0.5);
  22. }

通过 type 定制主题

通过 type 属性可以定制组件的样式，Header/Footer/Aside 支持 type 属性，并且与 Nav 组件保持一致

Layout 页面布局 - 图2

查看源码在线预览

  1. import React, { Component, PropTypes } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Layout from '@icedesign/layout';
  4. import { Icon, Dropdown, Nav, Radio } from '@alifd/next';
  6. class App extends Component {
  7.   state = {
  8.     type: 'normal'
  9.   };
  11.   render() {
  12.     return (
  13.       <Layout style={{ minHeight: '100vh' }}>
  14.         <Layout.Aside
  15.           type={this.state.type}
  16.         >
  17.           <Logo />
  18.           <Nav type={this.state.type}>
  19.             <Nav.Group label="需求">
  20.               <Nav.Item icon="account">需求1</Nav.Item>
  21.               <Nav.Item icon="account">需求2</Nav.Item>
  22.               <Nav.Item icon="account">需求3</Nav.Item>
  23.             </Nav.Group>
  24.             <Nav.Group label="我的">
  25.               <Nav.Item icon="account">资料</Nav.Item>
  26.               <Nav.Item icon="account">设置</Nav.Item>
  27.               <Nav.Item icon="account">主题</Nav.Item>
  28.             </Nav.Group>
  29.           </Nav>
  30.         </Layout.Aside>
  31.         <Layout.Section>
  32.           <Layout.Header
  33.             style={{
  34.               height: '60px',
  35.               padding: '0 20px',
  36.               justifyContent: 'space-between',
  37.             }}
  38.             type={this.state.type}
  39.           >
  40.             <Nav
  41.               type={this.state.type}
  42.               direction="hoz"
  43.               triggerType="hover"
  44.             >
  45.               <Nav.Item key="home">Home</Nav.Item>
  46.               <Nav.SubNav label="Component" selectable>
  47.                 <Nav.Item key="next">ICE</Nav.Item>
  48.                 <Nav.Item key="mext">Next</Nav.Item>
  49.               </Nav.SubNav>
  50.               <Nav.Item key="document">Document</Nav.Item>
  51.             </Nav>
  52.             <div>ICE</div>
  53.           </Layout.Header>
  54.           <Layout.Main
  55.             style={{
  56.               padding: 20,
  57.               margin: '0 24px'
  58.             }}
  59.           >
  60.             <Radio.Group
  61.               shape="button" size="medium"
  62.               value={this.state.type}
  63.               onChange={(value) => {
  64.                 this.setState({
  65.                   type: value
  66.                 })
  67.               }}
  68.             >
  69.               <Radio value="normal">type="normal"</Radio>
  70.               <Radio value="primary">type="primary"</Radio>
  71.               <Radio value="secondary">type="secondary"</Radio>
  72.               <Radio value="line">type="line"</Radio>
  73.               <Radio value="line">type="none"</Radio>
  74.             </Radio.Group>
  75.           </Layout.Main>
  76.           <Layout.Footer
  77.             type={this.state.type}
  78.             style={{
  79.               textAlign: 'center',
  80.               lineHeight: '36px'
  81.             }}
  82.           >
  83.             <p style={{ color: '#999' }}>
  84.               © 2017-2018 xxxx团队 版权所有 系统维护者：@xx 如有问题随时联系！
  85.               <br />
  86.               由 <a href="https://alibaba.github.io/ice" target="_blank"> ICE </a> 提供技术支持
  87.             </p>
  88.           </Layout.Footer>
  89.         </Layout.Section>
  90.       </Layout>
  91.     );
  92.   }
  93. }
  95. // 项目内敛 Logo 组件
  96. class Logo extends Component {
  97.   render() {
  98.     return (
  99.       <div
  100.         className="logo"
  101.         style={{
  102.           overflow: 'hidden',
  103.           height: 60,
  104.           color: '#f40',
  105.           textAlign: 'center',
  106.           ...this.props.style
  107.         }}
  108.       >
  109.         <div
  110.           style={{
  111.             height: 60,
  112.             lineHeight: '60px',
  113.             fontSize: 20,
  114.             ...this.props.style
  115.           }}
  116.         >
  117.           Your Logo
  118.         </div>
  119.       </div>
  120.     );
  121.   }
  122. }
  124. ReactDOM.render(<App />, mountNode);

Aside 收起展开模式

Layout 页面布局 - 图3

查看源码在线预览

  1. import React, { Component, PropTypes } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Layout from '@icedesign/layout';
  4. import { Icon, Nav } from '@alifd/next';
  6. class App extends Component {
  7.   state = {
  8.     collapse: false,
  9.   };
  11.   render() {
  12.     const { collapse } = this.state;
  13.     return (
  14.       <Layout style={{ minHeight: '100vh' }}>
  15.         <Layout.Aside
  16.           type="primary"
  17.           style={{
  18.             width: collapse ? 60 : 200
  19.           }}
  20.         >
  21.           <Logo text={collapse ? 'go' : 'your-logo'} />
  22.           <div style={{
  23.             display: 'flex',
  24.             justifyContent: 'center',
  25.             margin: '20px 0'
  26.           }}>
  27.             <Icon
  28.               type={collapse ? 'arrow-right' : 'arrow-left'}
  29.               onClick={() => {
  30.                 this.setState({
  31.                   collapse: !this.state.collapse
  32.                 })
  33.               }}
  34.             />
  35.           </div>
  36.           <Nav type="primary" iconOnly={this.state.collapse} hasTooltip={true}>
  38.             <Nav.SubNav icon="account" label="需求">
  39.               <Nav.Item icon="account">需求1</Nav.Item>
  40.               <Nav.Item icon="account">需求2</Nav.Item>
  41.               <Nav.Item icon="account">需求3</Nav.Item>
  42.             </Nav.SubNav>
  43.             <Nav.SubNav icon="account" label="我的">
  44.               <Nav.Item icon="account">资料</Nav.Item>
  45.               <Nav.Item icon="account">设置</Nav.Item>
  46.               <Nav.Item icon="account">主题</Nav.Item>
  47.             </Nav.SubNav>
  48.           </Nav>
  49.         </Layout.Aside>
  50.         <Layout.Section>
  51.           <Layout.Header
  52.             style={{
  53.               height: '60px',
  54.               padding: '0 20px',
  55.               justifyContent: 'space-between',
  56.             }}
  57.             type="primary"
  58.           >
  59.             <Nav
  60.               type="primary"
  61.               direction="hoz"
  62.               triggerType="hover"
  63.             >
  64.               <Nav.Item key="home">Home</Nav.Item>
  65.               <Nav.SubNav label="Component" selectable>
  66.                 <Nav.Item key="next">ICE</Nav.Item>
  67.                 <Nav.Item key="mext">Next</Nav.Item>
  68.               </Nav.SubNav>
  69.               <Nav.Item key="document">Document</Nav.Item>
  70.             </Nav>
  71.           </Layout.Header>
  72.           <Layout.Main
  73.             style={{
  74.               padding: 20,
  75.               height: 500,
  76.               margin: '0 24px'
  77.             }}
  78.           >
  79.             Main
  80.           </Layout.Main>
  81.           <Layout.Footer
  82.             type="primary"
  83.             style={{
  84.               textAlign: 'center',
  85.               lineHeight: '36px'
  86.             }}
  87.           >
  88.             <p style={{ color: '#999' }}>
  89.               © 2017-2018 xxxx团队 版权所有 系统维护者：@xx 如有问题随时联系！
  90.               <br />
  91.               由 <a href="https://alibaba.github.io/ice" target="_blank"> ICE </a> 提供技术支持
  92.             </p>
  93.           </Layout.Footer>
  94.         </Layout.Section>
  95.       </Layout>
  96.     );
  97.   }
  98. }
  100. // 项目内敛 Logo 组件
  101. class Logo extends Component {
  102.   render() {
  103.     const { text } = this.props;
  104.     return (
  105.       <div
  106.         className="logo"
  107.         style={{
  108.           overflow: 'hidden',
  109.           height: 60,
  110.           color: '#f40',
  111.           textAlign: 'center',
  112.           ...this.props.style
  113.         }}
  114.       >
  115.         <div
  116.           style={{
  117.             height: 60,
  118.             lineHeight: '60px',
  119.             fontSize: 20,
  120.             ...this.props.style
  121.           }}
  122.         >
  123.           {text}
  124.         </div>
  125.       </div>
  126.     );
  127.   }
  128. }
  130. ReactDOM.render(<App />, mountNode);

Header 吸顶

Header 固定（吸顶），其他区域滚动。

Layout 页面布局 - 图4

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Layout from '@icedesign/layout';
  5. class App extends Component {
  6.   render() {
  7.     return (
  8.       <Layout fixable={true}>
  9.         <Layout.Header style={{
  10.           height: 80,
  11.         }} type="primary">Header</Layout.Header>
  12.         <Layout.Section scrollable={true}>
  13.           <Layout.Aside style={{
  14.             width: 200,
  15.           }} type="primary">
  16.             <br />
  17.             Aside
  18.           </Layout.Aside>
  19.           <Layout.Main>
  20.             <p>Main</p>
  21.             <p style={{ height: 200 }}>内容可滚动</p>
  22.             <p style={{ height: 200 }}>内容可滚动</p>
  23.             <p style={{ height: 200 }}>内容可滚动</p>
  24.             <p style={{ height: 200 }}>内容可滚动</p>
  25.             <p style={{ height: 200 }}>内容可滚动</p>
  26.             <p style={{ height: 200 }}>内容可滚动</p>
  27.             <p style={{ height: 200 }}>内容可滚动</p>
  28.             <p style={{ height: 200 }}>内容可滚动 end</p>
  29.             <Layout.Footer>Footer</Layout.Footer>
  30.           </Layout.Main>
  31.         </Layout.Section>
  32.       </Layout>
  33.     );
  34.   }
  35. }
  37. ReactDOM.render(<App />, mountNode);

Header&Aside 固定，Aside 内容可滚动

Layout 页面布局 - 图5

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Layout from '@icedesign/layout';
  5. class App extends Component {
  6.   render() {
  7.     return (
  8.       <Layout fixable={true}>
  9.         <Layout.Header style={{
  10.           height: 80,
  11.         }} type="primary">&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
  12.         <Layout.Section>
  13.           <Layout.Aside style={{
  14.             width: 150,
  15.           }} type="primary" scrollable={true}>
  16.             <p>Aside</p>
  17.             <p style={{ height: 200 }}>内容可滚动</p>
  18.             <p style={{ height: 200 }}>内容可滚动</p>
  19.             <p style={{ height: 200 }}>内容可滚动</p>
  20.             <p style={{ height: 200 }}>内容可滚动</p>
  21.             <p style={{ height: 200 }}>内容可滚动</p>
  22.             <p style={{ height: 200 }}>内容可滚动</p>
  23.           </Layout.Aside>
  24.           <Layout.Main scrollable={true}>
  25.             <p>Main</p>
  26.             <p style={{ height: 200 }}>内容可滚动</p>
  27.             <p style={{ height: 200 }}>内容可滚动</p>
  28.             <p style={{ height: 200 }}>内容可滚动</p>
  29.             <p style={{ height: 200 }}>内容可滚动</p>
  30.             <p style={{ height: 200 }}>内容可滚动</p>
  31.             <p style={{ height: 200 }}>内容可滚动</p>
  32.             <p style={{ height: 200 }}>内容可滚动</p>
  33.             <p style={{ height: 200 }}>内容可滚动 end</p>
  34.             <Layout.Footer style={{
  35.               height: 80,
  36.             }} type="primary">Footer</Layout.Footer>
  37.           </Layout.Main>
  38.         </Layout.Section>
  39.       </Layout>
  40.     );
  41.   }
  42. }
  44. ReactDOM.render(<App />, mountNode);

Aside&Header 固定

Aside Header 固定位置布局，将 Footer 放在 Main 里一同滚动。

Layout 页面布局 - 图6

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Layout from '@icedesign/layout';

class App extends Component {
  render() {
    return (
      <Layout fixable={true}>
        <Layout.Aside style={{
          width: 80,
        }} type="primary">
          <br />
          Aside
        </Layout.Aside>
        <Layout.Section>
          <Layout.Header style={{
            height: 80,
          }} type="primary">&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
          <Layout.Main scrollable={true}>
            <p>Main</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <Layout.Footer style={{
              height: 80,
            }} type="primary">Footer</Layout.Footer>
          </Layout.Main>
        </Layout.Section>
      </Layout>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Aside 固定

Aside 固定，其他区域滚动

Layout 页面布局 - 图7

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Layout from '@icedesign/layout';

class App extends Component {
  render() {
    return (
      <Layout fixable={true}>
        <Layout.Aside style={{
          width: 200,
        }} type="primary">
          <br />
          Aside
        </Layout.Aside>
        <Layout.Section scrollable={true}>
          <Layout.Header type="primary" style={{
            height: 80
          }}>&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
          <Layout.Main>
            <p>Main</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
            <p style={{ height: 200 }}>内容可滚动</p>
          </Layout.Main>
          <Layout.Footer style={{
            height: 200
          }}>Footer</Layout.Footer>
        </Layout.Section>
      </Layout>
    );
  }
}

ReactDOM.render(<App />, mountNode);

上中下应用示例

Layout 页面布局 - 图8

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Layout from '@icedesign/layout';
import { Nav } from '@alifd/next';

class App extends Component {
  render() {
    return (
      <Layout>
        <Layout.Header style={{ padding: '12px 50px' }} type="primary">
          <Nav
            type="primary"
            direction="hoz"
            triggerType="hover"
          >
            <Nav.Item key="home">Home</Nav.Item>
            <Nav.SubNav label="Component" selectable>
              <Nav.Item key="next">ICE</Nav.Item>
              <Nav.Item key="mext">Next</Nav.Item>
            </Nav.SubNav>
            <Nav.Item key="document">Document</Nav.Item>
          </Nav>
        </Layout.Header>
        <Layout.Section style={{ padding: '0 50px' }}>
          <Layout.Main
            style={{
              background: '#fff',
              padding: 24,
              minHeight: 280
            }}
          >
            Main
          </Layout.Main>
        </Layout.Section>
        <Layout.Footer
          type="secondary"
          style={{
            textAlign: 'center',
            lineHeight: '36px'
          }}
        >
          <p>
            © 2017-2018 xxxx团队 版权所有 系统维护者：@xx 如有问题随时联系！
            <br />
            由
            {' '}
            <a href="//ice.alibaba-inc.com" target="_blank">ICE</a>
            {' '}
            提供技术支持
          </p>
        </Layout.Footer>
      </Layout>
    );
  }
}

ReactDOM.render(<App />, mountNode);

相关区块

Layout 页面布局 - 图9

暂无相关区块