Layout 页面布局

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/layout@0.1.7 -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

顶部布局，默认内部元素居中对其。

参数（props）

参数名说明类型默认值
alignItems内部元素垂直对其方式stringcenter
theme配置 Header 皮肤色string-

  • alignItems：flex-start flex-end center baseline stretch

  • theme：dark, light

Layout.Aside

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

参数（props）

参数名说明类型默认值
width展开状态下的宽度number/string200
theme配置 Aside 皮肤色string-
  • theme：dark, light

Layout.Main

参数（props）

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

主体内容。

页脚布局。

代码示例

基本结构

基础组件 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>&nbsp;&nbsp;&nbsp;&nbsp;header</Layout.Header>
  11.           <Layout.Main>Main</Layout.Main>
  12.           <Layout.Footer>Footer</Layout.Footer>
  13.         </Layout>
  15.         <Layout>
  16.           <Layout.Header>&nbsp;&nbsp;&nbsp;&nbsp;header</Layout.Header>
  17.           <Layout.Section>
  18.             <Layout.Aside>Aside</Layout.Aside>
  19.             <Layout.Main>Main</Layout.Main>
  20.           </Layout.Section>
  21.           <Layout.Footer>Footer</Layout.Footer>
  22.         </Layout>
  24.         <Layout>
  25.           <Layout.Header>&nbsp;&nbsp;&nbsp;&nbsp;header</Layout.Header>
  26.           <Layout.Section style={{ padding: '20px 40px' }}>
  27.             <Layout.Aside>Aside</Layout.Aside>
  28.             <Layout.Main>Main</Layout.Main>
  29.           </Layout.Section>
  30.           <Layout.Footer>Footer</Layout.Footer>
  31.         </Layout>
  33.         <Layout>
  34.           <Layout.Header>&nbsp;&nbsp;&nbsp;&nbsp;header</Layout.Header>
  35.           <Layout.Section>
  36.             <Layout.Aside>Aside</Layout.Aside>
  37.             <Layout.Main>Main</Layout.Main>
  38.             <Layout.Aside>Aside</Layout.Aside>
  39.           </Layout.Section>
  40.           <Layout.Footer>Footer</Layout.Footer>
  41.         </Layout>
  43.         <Layout>
  44.           <Layout.Aside>Aside</Layout.Aside>
  45.           <Layout.Section>
  46.             <Layout.Header>&nbsp;&nbsp;&nbsp;&nbsp;header</Layout.Header>
  47.             <Layout.Main>Main</Layout.Main>
  48.             <Layout.Footer>Footer</Layout.Footer>
  49.           </Layout.Section>
  50.         </Layout>
  51.       </div>
  52.     );
  53.   }
  54. }
  56. 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. }

Aside 吸顶

Aside Header Footer 固定位置布局。

Layout 页面布局 - 图2

查看源码在线预览

  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.Aside>
  10.           <br />
  11.           Aside
  12.         </Layout.Aside>
  13.         <Layout.Section scrollable={true}>
  14.           <Layout.Header>&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
  15.           <Layout.Main>
  16.             <p style={{ height: 200 }}>内容可滚动</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.             <p style={{ height: 200 }}>内容可滚动</p>
  24.           </Layout.Main>
  25.           <Layout.Footer>Footer</Layout.Footer>
  26.         </Layout.Section>
  27.       </Layout>
  28.     );
  29.   }
  30. }
  32. ReactDOM.render(<App />, mountNode);
  1. .ice-layout {
  2.   color: #fff;
  3.   text-align: center;
  4.   background-color: #eee;
  5. }
  6. .ice-layout-header {
  7.   line-height: 50px;
  8.   background-color: #84B0E7 !important;;
  9. }
  10. .ice-layout-aside {
  11.   background-color: rgba(27, 115, 225, 0.7) !important;;
  12. }
  13. .ice-layout-main {
  14.   line-height: 120px;
  15.   background-color: rgba(27, 115, 225, 1);
  16. }
  17. .ice-layout-footer {
  18.   line-height: 50px;
  19.   background-color: #84B0E7;
  20. }

Aside Header 吸顶

Aside Header 固定位置布局。

将 Footer 放在 Main 里一同滚动。

Layout 页面布局 - 图3

查看源码在线预览

  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.Aside>
  10.           <br />
  11.           Aside
  12.         </Layout.Aside>
  13.         <Layout.Section>
  14.           <Layout.Header>&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
  15.           <Layout.Main scrollable={true}>
  16.             <p style={{ height: 200 }}>内容可滚动</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.             <p style={{ height: 200 }}>内容可滚动</p>
  24.             <Layout.Footer>Footer</Layout.Footer>
  25.           </Layout.Main>
  26.         </Layout.Section>
  27.       </Layout>
  28.     );
  29.   }
  30. }
  32. ReactDOM.render(<App />, mountNode);
  1. .ice-layout {
  2.   color: #fff;
  3.   text-align: center;
  4.   background-color: #eee;
  5. }
  6. .ice-layout-header {
  7.   line-height: 50px;
  8.   background-color: #84B0E7 !important;;
  9. }
  10. .ice-layout-aside {
  11.   background-color: rgba(27, 115, 225, 0.7) !important;;
  12. }
  13. .ice-layout-main {
  14.   line-height: 120px;
  15.   background-color: rgba(27, 115, 225, 1);
  16. }
  17. .ice-layout-footer {
  18.   line-height: 50px;
  19.   background-color: #84B0E7;
  20. }

Header 吸顶

Header Aside Footer 固定位置布局。

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>&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
  10.         <Layout.Section scrollable={true}>
  11.           <Layout.Aside>
  12.             <br />
  13.             Aside
  14.           </Layout.Aside>
  15.           <Layout.Main>
  16.             <p style={{ height: 200 }}>内容可滚动</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.             <p style={{ height: 200 }}>内容可滚动 end</p>
  24.             <Layout.Footer>Footer</Layout.Footer>
  25.           </Layout.Main>
  26.         </Layout.Section>
  27.       </Layout>
  28.     );
  29.   }
  30. }
  32. ReactDOM.render(<App />, mountNode);
  1. .ice-layout {
  2.   color: #fff;
  3.   text-align: center;
  4.   background-color: #eee;
  5. }
  6. .ice-layout-header {
  7.   line-height: 50px;
  8.   background-color: #84B0E7 !important;;
  9. }
  10. .ice-layout-aside {
  11.   background-color: rgba(27, 115, 225, 0.7) !important;;
  12. }
  13. .ice-layout-main {
  14.   line-height: 120px;
  15.   background-color: rgba(27, 115, 225, 1);
  16. }
  17. .ice-layout-footer {
  18.   line-height: 50px;
  19.   background-color: #84B0E7;
  20. }

Header Aside 吸顶

Header Aside 固定位置布局。

将 Footer 放在 Main 里一同滚动。

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>&nbsp;&nbsp;&nbsp;&nbsp;Header</Layout.Header>
  10.         <Layout.Section>
  11.           <Layout.Aside scrollable={true}>
  12.             <p style={{ height: 200 }}>内容可滚动</p>
  13.             <p style={{ height: 200 }}>内容可滚动</p>
  14.             <p style={{ height: 200 }}>内容可滚动</p>
  15.             <p style={{ height: 200 }}>内容可滚动</p>
  16.             <p style={{ height: 200 }}>内容可滚动</p>
  17.             <p style={{ height: 200 }}>内容可滚动</p>
  18.           </Layout.Aside>
  19.           <Layout.Main scrollable={true}>
  20.             <p style={{ height: 200 }}>内容可滚动</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 }}>内容可滚动 end</p>
  28.             <Layout.Footer>Footer</Layout.Footer>
  29.           </Layout.Main>
  30.         </Layout.Section>
  31.       </Layout>
  32.     );
  33.   }
  34. }
  36. ReactDOM.render(<App />, mountNode);
  1. .ice-layout {
  2.   color: #fff;
  3.   text-align: center;
  4.   background-color: #eee;
  5. }
  6. .ice-layout-header {
  7.   line-height: 50px;
  8.   background-color: #84B0E7 !important;
  9. }
  10. .ice-layout-aside {
  11.   background-color: rgba(27, 115, 225, 0.7) !important;;
  12. }
  13. .ice-layout-main {
  14.   line-height: 120px;
  15.   background-color: rgba(27, 115, 225, 1);
  16. }
  17. .ice-layout-footer {
  18.   line-height: 50px;
  19.   background-color: #84B0E7;
  20. }

Aside 应用示例

Layout 页面布局 - 图6

查看源码在线预览

  1. import React, { Component, PropTypes } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Layout from '@icedesign/layout';
  4. import { Breadcrumb, Icon, Button, Dropdown, Select } from '@icedesign/base';
  5. import Img from '@icedesign/img';
  7. import StyledMenu, {
  8.   SubMenu,
  9.   ItemGroup as MenuItemGroup,
  10.   Item as MenuItem
  11. } from '@icedesign/styled-menu';
  13. class App extends Component {
  14.   state = {
  15.     current: 'setting:1',
  16.     mode: 'inline',
  17.     headerTheme: 'light',
  18.     headerColor: '',
  19.     asideTheme: 'dark',
  20.     asideColor: '',
  21.   };
  23.   handleClick = e => {
  24.     this.setState({
  25.       current: e.key
  26.     });
  27.   };
  29.   headerThemeChange = value => {
  30.     this.setState({ headerTheme: value });
  31.   };
  32.   headerColorChange = value => {
  33.     this.setState({ headerColor: value });
  34.   };
  35.   asideThemeChange = value => {
  36.     this.setState({ asideTheme: value });
  37.   };
  38.   asideColorChange = value => {
  39.     this.setState({ asideColor: value });
  40.   };
  42.   render() {
  43.     return (
  44.       <Layout style={{ minHeight: '100vh' }}>
  45.         <Layout.Aside theme={this.state.asideTheme} color={this.state.asideColor}>
  46.           <Logo {...getDefaultFontColor(this.state.asideTheme)} />
  47.           <StyledMenu theme={this.state.asideTheme} color={this.state.asideColor} mode={this.state.mode}>
  48.             <SubMenu
  49.               key="sub1"
  50.               title={
  51.                 <span>
  52.                   <Icon size="xs" type="similar-product" /><span>侧边菜单一</span>
  53.                 </span>
  54.               }
  55.             >
  56.               <MenuItemGroup title="Item 1">
  57.                 <MenuItem key="1">子菜单一</MenuItem>
  58.                 <MenuItem key="2">子菜单二</MenuItem>
  59.               </MenuItemGroup>
  60.               <MenuItemGroup title="Iteom 2">
  61.                 <MenuItem key="3">子菜单三</MenuItem>
  62.                 <MenuItem key="4">子菜单四</MenuItem>
  63.               </MenuItemGroup>
  64.             </SubMenu>
  65.             <SubMenu
  66.               key="sub2"
  67.               title={
  68.                 <span>
  69.                   <Icon size="xs" type="bags" /><span>侧边菜单二</span>
  70.                 </span>
  71.               }
  72.             >
  73.               <MenuItem key="5">子菜单一</MenuItem>
  74.               <MenuItem key="6">子菜单二</MenuItem>
  75.               <SubMenu key="sub3" title="Submenu">
  76.                 <MenuItem key="7">子菜单三</MenuItem>
  77.                 <MenuItem key="8">子菜单四</MenuItem>
  78.               </SubMenu>
  79.             </SubMenu>
  80.             <SubMenu
  81.               key="sub4"
  82.               title={
  83.                 <span>
  84.                   <Icon size="xs" type="history" /><span>侧边菜单三</span>
  85.                 </span>
  86.               }
  87.             >
  88.               <MenuItem key="9">子菜单一</MenuItem>
  89.               <MenuItem key="10">子菜单二</MenuItem>
  90.               <MenuItem key="11">子菜单三</MenuItem>
  91.               <MenuItem key="12">子菜单四</MenuItem>
  92.             </SubMenu>
  93.           </StyledMenu>
  94.         </Layout.Aside>
  95.         <Layout.Section>
  96.           <Layout.Header
  97.             theme={this.state.headerTheme}
  98.             color={this.state.headerColor}
  99.             style={{
  100.               height: '56px',
  101.               padding: '0 24px 0 0',
  102.               justifyContent: 'space-between'
  103.             }}
  104.           >
  105.             <StyledMenu
  106.               theme={this.state.headerTheme}
  107.               color={this.state.headerColor}
  108.               onClick={this.handleClick}
  109.               selectedKeys={[this.state.current]}
  110.               mode="horizontal"
  111.             >
  112.               <MenuItem key="mail">
  113.                 <Icon type="service" />首页
  114.               </MenuItem>
  115.               <MenuItem key="app" disabled>
  116.                 <Icon type="training" />分类
  117.               </MenuItem>
  118.               <SubMenu key="favorite" title={<span><Icon type="favorite" />收藏</span>}>
  119.                 <MenuItemGroup title="购买清单">
  120.                   <MenuItem key="setting:1">家电</MenuItem>
  121.                   <MenuItem key="setting:2">床品</MenuItem>
  122.                 </MenuItemGroup>
  123.                 <MenuItemGroup title="心愿单">
  124.                   <MenuItem key="setting:3">童装</MenuItem>
  125.                   <MenuItem key="setting:4">女装</MenuItem>
  126.                 </MenuItemGroup>
  127.               </SubMenu>
  128.               <MenuItem key="ice">
  129.                 <a
  130.                   href="http://ice.alibaba-inc.com/"
  131.                   target="_blank"
  132.                   rel="noopener noreferrer"
  133.                 >
  134.                   ICE 官网
  135.                 </a>
  136.               </MenuItem>
  137.             </StyledMenu>
  138.             <div className="ice-layout-header-right" {...getDefaultFontColor(this.state.headerTheme)}>
  139.               <span style={{ paddingRight: 12 }}>
  140.                 下午好，内容管理后台。
  141.               </span>
  142.               <UserPanel
  143.                 offset={[0, 11]}
  144.                 size={36}
  145.                 shape="circle"
  146.                 userName="Jack Ma"
  147.                 avatar="//img.alicdn.com/tfs/TB1JLbBQXXXXXcUapXXXXXXXXXX-215-185.png"
  148.               >
  149.                 <div>
  150.                   <StyledMenu
  151.                     style={{
  152.                       minWidth: 120,
  153.                       boxShadow: '0 0 2px #ccc'
  154.                     }}
  155.                   >
  156.                     <MenuItem>
  157.                       <a href="/">信息中心</a>
  158.                     </MenuItem>
  159.                     <MenuItem>
  160.                       <a href="/">设置</a>
  161.                     </MenuItem>
  162.                     <MenuItem>
  163.                       <a href="/">退出</a>
  164.                     </MenuItem>
  165.                   </StyledMenu>
  166.                 </div>
  167.               </UserPanel>
  168.             </div>
  169.           </Layout.Header>
  170.           <Breadcrumb style={{ margin: '12px 24px' }}>
  171.             <Breadcrumb.Item link="javascript:void(0);">
  172.               首页
  173.             </Breadcrumb.Item>
  174.             <Breadcrumb.Item link="javascript:void(0);">
  175.               分类
  176.             </Breadcrumb.Item>
  177.             <Breadcrumb.Item link="javascript:void(0);">
  178.               收藏
  179.             </Breadcrumb.Item>
  180.           </Breadcrumb>
  181.           <Layout.Main
  182.             style={{
  183.               padding: 20,
  184.               margin: '0 24px',
  185.               backgroundColor: '#fff'
  186.             }}
  187.           >
  188.             <table>
  189.               <thead>
  190.                 <tr>
  191.                   <td colSpan="4">
  192.                     <p>
  193.                       通过配置 Layout.Header、Layout.Aside 以及 IceMenu 的 theme 和 color props 实现组合配色
  194.                     </p>
  195.                     <p>
  196.                       为了达到视觉美观，推荐 Layout.Header、Layout.Aside 与内部 IceMenu 使用统一的配色配置。
  197.                     </p>
  198.                   </td>
  199.                 </tr>
  200.                 <tr>
  201.                   <td>
  202.                     <br />
  203.                   </td>
  204.                 </tr>
  205.               </thead>
  206.               <tbody style={{ color: '#999' }}>
  207.                 <tr>
  208.                   <td>切换 Header theme：</td>
  209.                   <td>
  210.                     <Select
  211.                       style={{width: 200}}
  212.                       onChange={this.headerThemeChange}
  213.                       defaultValue={this.state.headerTheme}
  214.                     >
  215.                       <Select.Option value="dark">
  216.                         dark
  217.                       </Select.Option>
  218.                       <Select.Option value="light">
  219.                         light
  220.                       </Select.Option>
  221.                     </Select>
  222.                   </td>
  224.                 </tr>
  225.                 <tr>
  226.                   <td>
  227.                     切换 Aside theme：
  228.                   </td>
  229.                   <td>
  230.                     <Select
  231.                       style={{width: 200}}
  232.                       onChange={this.asideThemeChange}
  233.                       defaultValue={this.state.asideTheme}
  234.                     >
  235.                       <Select.Option value="dark">
  236.                         dark
  237.                       </Select.Option>
  238.                       <Select.Option value="light">
  239.                         light
  240.                       </Select.Option>
  241.                     </Select>
  242.                   </td>
  243.                 </tr>
  244.               </tbody>
  245.             </table>
  246.             {this.props.children}
  247.           </Layout.Main>
  248.           <Layout.Footer
  249.             style={{
  250.               textAlign: 'center',
  251.               lineHeight: '36px'
  252.             }}
  253.           >
  254.             <p style={{ color: '#999' }}>
  255.               © 2017-2018 xxxx团队 版权所有 系统维护者：@xx 如有问题随时联系！
  256.               <br />
  257.               由 <a href="//ice.alibaba-inc.com" target="_blank"> ICE </a> 提供技术支持
  258.             </p>
  259.           </Layout.Footer>
  260.         </Layout.Section>
  261.       </Layout>
  262.     );
  263.   }
  264. }
  266. // 项目内敛 Logo 组件
  267. class Logo extends Component {
  268.   render() {
  269.     return (
  270.       <div
  271.         className="logo"
  272.         style={{
  273.           overflow: 'hidden',
  274.           height: 60,
  275.           color: '#f40',
  276.           textAlign: 'center',
  277.           ...this.props.style
  278.         }}
  279.       >
  280.         <a href="/">
  281.           <div
  282.             style={{
  283.               height: 60,
  284.               lineHeight: '60px',
  285.               fontSize: 20,
  286.               ...this.props.style
  287.             }}
  288.           >
  289.             Your Logo
  290.           </div>
  291.         </a>
  292.       </div>
  293.     );
  294.   }
  295. }
  297. // 项目内敛 用户面板 组件
  298. class UserPanel extends Component {
  299.   static displayName = 'UserPanel';
  301.   static propTypes = {};
  303.   static defaultProps = {
  304.     size: 50,
  305.     shape: 'sharp',
  306.     type: 'cover',
  307.     avatar: ''
  308.   };
  310.   constructor(props) {
  311.     super(props);
  313.     this.state = {
  314.       dropdownVisible: false
  315.     };
  316.   }
  318.   handleDropChange = value => {
  319.     this.setState({
  320.       dropdownVisible: value
  321.     });
  322.   };
  324.   render() {
  325.     const {
  326.       offset,
  327.       size,
  328.       shape,
  329.       type,
  330.       avatar,
  331.       style,
  332.       children,
  333.       className = ''
  334.     } = this.props;
  335.     const hasChildren = React.Children.count(children) > 0;
  336.     const trigger = (
  337.       <div
  338.         className={`ice-user-panel ${className}`}
  339.         style={{
  340.           ...style,
  341.           overflow: 'hidden',
  342.           cursor: hasChildren ? 'pointer' : 'default'
  343.         }}
  344.       >
  345.         <div className="avatar" style={{ float: 'left' }}>
  346.           <Img
  347.             height={size}
  348.             width={size}
  349.             type={type}
  350.             shape={shape}
  351.             src={avatar}
  352.           />
  353.         </div>
  354.         <div
  355.           className="user-name"
  356.           style={{
  357.             float: 'left',
  358.             height: size,
  359.             lineHeight: `${size}px`
  360.           }}
  361.         >
  362.           <span style={{ padding: '10px' }}>
  363.             {this.props.userName}
  364.           </span>
  365.           <Icon
  366.             type={this.state.dropdownVisible ? 'arrow-up' : 'arrow-down'}
  367.             size="xxs"
  368.           />
  369.         </div>
  370.       </div>
  371.     );
  372.     if (hasChildren) {
  373.       return (
  374.         <Dropdown
  375.           offset={offset}
  376.           align="tr br"
  377.           trigger={trigger}
  378.           onVisibleChange={this.handleDropChange}
  379.         >
  380.           {this.props.children}
  381.         </Dropdown>
  382.       );
  383.     } else {
  384.       return trigger;
  385.     }
  386.   }
  387. }
  389. function getDefaultFontColor(theme) {
  390.   let result = {
  391.     style: {
  392.       color: '#fff',
  393.     }
  394.   };
  396.   if (theme.indexOf('light') > -1) {
  397.     result = {
  398.       style: {
  399.         color: '#000',
  400.       }
  401.     };
  402.   }
  404.   return result;
  405. }
  407. ReactDOM.render(<App />, mountNode);

Header Aside 应用示例

Layout 页面布局 - 图7

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Layout from '@icedesign/layout';
import { Breadcrumb, Icon } from '@icedesign/base';
import Img from '@icedesign/img';

import StyledMenu, {
  SubMenu,
  ItemGroup as MenuItemGroup,
  Item as MenuItem
} from '@icedesign/styled-menu';

class App extends Component {
  state = {
    current: 'mail'
  };

  handleNavClick = e => {
    this.setState({
      current: e.key
    });
  };

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Layout.Header style={{ padding: '12px 50px' }} theme="dark">
          <Logo />
          <StyledMenu
            theme="dark"
            onClick={this.handleNavClick}
            selectedKeys={[this.state.current]}
            mode="horizontal"
          >
            <MenuItem key="mail">
              <Icon type="service" />首页
            </MenuItem>
            <MenuItem key="app" disabled>
              <Icon type="training" />分类
            </MenuItem>
            <SubMenu title={<span><Icon type="favorite" />收藏</span>}>
              <MenuItemGroup title="购买清单">
                <MenuItem key="setting:1">家电</MenuItem>
                <MenuItem key="setting:2">床品</MenuItem>
              </MenuItemGroup>
              <MenuItemGroup title="心愿单">
                <MenuItem key="setting:3">童装</MenuItem>
                <MenuItem key="setting:4">女装</MenuItem>
              </MenuItemGroup>
            </SubMenu>
            <MenuItem key="ice">
              <a
                href="http://ice.alibaba-inc.com/"
                target="_blank"
                rel="noopener noreferrer"
              >
                ICE 官网
              </a>
            </MenuItem>
          </StyledMenu>
        </Layout.Header>
        <Layout.Section style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '12px 0' }}>
            <Breadcrumb.Item link="javascript:void(0);">
              首页
            </Breadcrumb.Item>
            <Breadcrumb.Item link="javascript:void(0);">
              分类
            </Breadcrumb.Item>
            <Breadcrumb.Item link="javascript:void(0);">
              收藏
            </Breadcrumb.Item>
          </Breadcrumb>
          <Layout.Section style={{ background: '#fff', minHeight: 280 }}>
            <Layout.Aside theme="light">
              <StyledMenu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
              >
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      <Icon type="mail" />
                      <span>侧边菜单一</span>
                    </span>
                  }
                >
                  <MenuItemGroup title="Item 1">
                    <MenuItem key="1">子菜单一</MenuItem>
                    <MenuItem key="2">子菜单二</MenuItem>
                  </MenuItemGroup>
                  <MenuItemGroup title="Iteom 2">
                    <MenuItem key="3">子菜单三</MenuItem>
                    <MenuItem key="4">子菜单四</MenuItem>
                  </MenuItemGroup>
                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={
                    <span>
                      <Icon type="appstore" />
                      <span>侧边菜单二</span>
                    </span>
                  }
                >
                  <MenuItem key="5">子菜单一</MenuItem>
                  <MenuItem key="6">子菜单二</MenuItem>
                  <SubMenu key="sub3" title="Submenu">
                    <MenuItem key="7">子菜单三</MenuItem>
                    <MenuItem key="8">子菜单四</MenuItem>
                  </SubMenu>
                </SubMenu>
                <SubMenu
                  key="sub4"
                  title={
                    <span>
                      <icon type="setting" />
                      <span>侧边菜单三</span>
                    </span>
                  }
                >
                  <MenuItem key="9">子菜单一</MenuItem>
                  <MenuItem key="10">子菜单二</MenuItem>
                  <MenuItem key="11">子菜单三</MenuItem>
                  <MenuItem key="12">子菜单四</MenuItem>
                </SubMenu>
              </StyledMenu>
            </Layout.Aside>
            <Layout.Main style={{ padding: 24 }}>
              Main
            </Layout.Main>
          </Layout.Section>
        </Layout.Section>
        <Layout.Footer
          style={{
            textAlign: 'center',
            lineHeight: '36px'
          }}
        >
          <p style={{ color: '#999' }}>
            © 2017-2018 xxxx团队 版权所有 系统维护者：@xx 如有问题随时联系！
            <br />
            由
            {' '}
            <a href="//ice.alibaba-inc.com" target="_blank">ICE</a>
            {' '}
            提供技术支持
          </p>
        </Layout.Footer>
      </Layout>
    );
  }
}

class Logo extends Component {
  render() {
    return (
      <div
        className="logo"
        style={{
          overflow: 'hidden',
          height: 35,
          margin: 10,
          color: '#f40',
          textAlign: 'left',
          minWidth: 200
        }}
      >
        <a href="/">
          <Img
            style={{ display: 'inline-block' }}
            height={35}
            width={129}
            src="https://img.alicdn.com/tps/TB1k.vjNpXXXXc6XXXXXXXXXXXX-258-70.png"
            type="contain"
          />
        </a>
      </div>
    );
  }
}

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

上中下应用示例

Layout 页面布局 - 图8

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Layout from '@icedesign/layout';
import { Breadcrumb, Icon } from '@icedesign/base';
import Img from '@icedesign/img';

import StyledMenu, {
  SubMenu,
  ItemGroup as MenuItemGroup,
  Item as MenuItem
} from '@icedesign/styled-menu';

class App extends Component {
  state = {
    current: 'mail'
  };

  handleClick = e => {
    console.log('click ', e);
    this.setState({
      current: e.key
    });
  };

  render() {
    return (
      <Layout>
        <Layout.Header style={{ padding: '12px 50px' }} theme="dark">
          <Logo />
          <StyledMenu
            theme="dark"
            onClick={this.handleClick}
            selectedKeys={[this.state.current]}
            mode="horizontal"
          >
            <MenuItem key="mail">
              <Icon type="service" />首页
            </MenuItem>
            <MenuItem key="app" disabled>
              <Icon type="training" />分类
            </MenuItem>
            <SubMenu title={<span><Icon type="favorite" />收藏</span>}>
              <MenuItemGroup title="购买清单">
                <MenuItem key="setting:1">家电</MenuItem>
                <MenuItem key="setting:2">床品</MenuItem>
              </MenuItemGroup>
              <MenuItemGroup title="心愿单">
                <MenuItem key="setting:3">童装</MenuItem>
                <MenuItem key="setting:4">女装</MenuItem>
              </MenuItemGroup>
            </SubMenu>
            <MenuItem key="ice">
              <a
                href="http://ice.alibaba-inc.com/"
                target="_blank"
                rel="noopener noreferrer"
              >
                ICE 官网
              </a>
            </MenuItem>
          </StyledMenu>
        </Layout.Header>
        <Layout.Section style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '12px 0' }}>
            <Breadcrumb.Item link="javascript:void(0);">
              首页
            </Breadcrumb.Item>
            <Breadcrumb.Item link="javascript:void(0);">
              分类
            </Breadcrumb.Item>
            <Breadcrumb.Item link="javascript:void(0);">
              收藏
            </Breadcrumb.Item>
          </Breadcrumb>
          <Layout.Main
            style={{
              background: '#fff',
              padding: 24,
              minHeight: 280
            }}
          >
            Main
          </Layout.Main>
        </Layout.Section>
        <Layout.Footer
          style={{
            textAlign: 'center',
            lineHeight: '36px'
          }}
        >
          <p style={{ color: '#999' }}>
            © 2017-2018 xxxx团队 版权所有 系统维护者：@xx 如有问题随时联系！
            <br />
            由
            {' '}
            <a href="//ice.alibaba-inc.com" target="_blank">ICE</a>
            {' '}
            提供技术支持
          </p>
        </Layout.Footer>
      </Layout>
    );
  }
}

class Logo extends Component {
  render() {
    return (
      <div
        className="logo"
        style={{
          overflow: 'hidden',
          height: 35,
          margin: 10,
          color: '#f40',
          textAlign: 'left',
          minWidth: 200
        }}
      >
        <a href="/">
          <Img
            style={{ display: 'inline-block' }}
            height={35}
            width={129}
            src="https://img.alicdn.com/tps/TB1k.vjNpXXXXc6XXXXXXXXXXXX-258-70.png"
            type="contain"
          />
        </a>
      </div>
    );
  }
}

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

相关区块

Layout 页面布局 - 图9

暂无相关区块