@b-design/ui-layout/README.md

React component for Alibaba Cloud.

# @b-design/ui-layout

## 安装

```bash
tnpm i -S @b-design/ui-layout
```

## 介绍

### 我们为您提供了三种固定布局组件以及可自由定制的组件：

<VerticalLayout />组件为左侧垂直菜单和header区域布局；
<HozLayout />组件为菜单和Header区域融合布局;
<BothSidesLayout />组件为二级导航布局，即为顶部导航和左侧导航共存；
<Layout />组件为可自由定制组件；

## 使用示例

### 基本使用
```javascript

import Layout from '@b-design/ui-layout';
import { Breadcrumb } from '@b-design/ui'

const items = [
  { key: '/home', to: '/home', label: '首页', icon: 'Home-outlined', },
  { key: '/instance', to: '/instance', label: '实例概览', icon: 'Home-outlined', },
  {
    key: '/logs',
    label: '日志',
    icon: 'Home-outlined',
    items: [
      { key: '/pre', to: '/pre', label: '预发环境' },
      { key: '/prod', to: '/prod', label: '生产环境' },
    ],
  },
]

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item>Home</Breadcrumb.Item>
    <Breadcrumb.Item>Blog</Breadcrumb.Item>
    <Breadcrumb.Item>Name It, and They Will Come</Breadcrumb.Item>
  </Breadcrumb>
)

const Layout = (props) => {

  return (
    <Layout>
      <Layout.Header
        leftContainer={(<div>Header左侧区域</div>)}
        title='B-Design'
        rightContainer={(<div>Header右侧区域</div>)}
        style={{ color: '#ffffff' }}
      />
      <Layout.Container>
        <Layout.Sider>
          <RoutableMenu 
            items={items} 
            style={{height: '100%', width: '200px'}}
          />
        </Layout.Sider>
        <Page style={{flex: 'auto'}}>
          <Page.Header
            title={'测试测试测试测'}
            breadcrumb={breadcrumb}
            onBackArrowClick={() => {
              window.history.back()
            }}
          />
          <Page.Content>
            <div>内容内容内容</div>
          </Page.Content>
        </Page>
      </Layout.Container>
    </Layout>
  )

}

```

## 固定布局

### 使用左侧菜单固定布局

```javascript

import { VerticalLayout } from '@b-design/ui-layout';
import { Breadcrumb } from '@b-design/ui'

const items = [
  { key: '/home', to: '/home', label: '首页', icon: 'Home-outlined', },
  { key: '/instance', to: '/instance', label: '实例概览', icon: 'Home-outlined', },
  {
    key: '/logs',
    label: '日志',
    icon: 'Home-outlined',
    items: [
      { key: '/pre', to: '/pre', label: '预发环境' },
      { key: '/prod', to: '/prod', label: '生产环境' },
    ],
  },
]

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item>Home</Breadcrumb.Item>
    <Breadcrumb.Item>Blog</Breadcrumb.Item>
    <Breadcrumb.Item>Name It, and They Will Come</Breadcrumb.Item>
  </Breadcrumb>
)

const Layout = (props) => {

  return (
    <VerticalLayout 
      breadcrumb={breadcrumb}
      menus={items}
      leftContainer={(<div>Header左侧区域</div>)}
      rightContainer={(<div>Header右侧区域</div>)}
      pageTitle='内容区的标题'
      onBackArrowClick={() => {
        window.history.back()
      }}
      headerExtra={(<h3>测试测试</h3>)}
    >
      {props.children}
    </VerticalLayout>
  )
}

```

### 使用横向导航的页面布局

```javascript

import { HozLayout } from '@b-design/ui-layout';
import { Breadcrumb } from '@b-design/ui'

const items = [
  {
    key: '/home',
    label: '首页',
    to: '/home'
  },
  {
    key: '/demo',
    label: '例子',
    items: [
      {
        key: '/demo/item1',
        to: '/demo/item1',
        label: '子节点1',
      },
      {
        key: '/demo/item2',
        to: '/demo/item2',
        label: '子节点2',
      }
    ]
  }
]

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item>Home</Breadcrumb.Item>
    <Breadcrumb.Item>Blog</Breadcrumb.Item>
    <Breadcrumb.Item>Name It, and They Will Come</Breadcrumb.Item>
  </Breadcrumb>
)

const Layout = (props) => {

  return (
    <HozLayout 
      breadcrumb={breadcrumb} 
      menus={items}
      leftContainer={(<div>Header左侧区域</div>)}
      rightContainer={(<div>Header右侧区域</div>)}
      pageTitle='内容区的标题'
      onBackArrowClick={() => {
        window.history.back()
      }}
    >
      {props.children}
    </HozLayout>
  )
}

```

### 使用二级导航的页面布局

``` javascript

import { BothSidesLayout } from '@b-design/ui-layout';
import { Breadcrumb } from '@b-design/ui'

const NAVS = [
  {
    key: '/home',
    label: '首页',
    to: '/home'
  },
  {
    key: '/demo',
    label: '例子',
    items: [
      {
        key: '/demo/item1',
        to: '/demo/item1',
        label: '子节点1',
        items: [
          {
            key: '/demo/item1/item',
            label: '示例',
            to: '/demo/item1/item'
          }
        ]
      },
      {
        key: '/demo/item2',
        to: '/demo/item2',
        label: '子节点2',
      }
    ]
  }
]

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item>Home</Breadcrumb.Item>
    <Breadcrumb.Item>Blog</Breadcrumb.Item>
    <Breadcrumb.Item>Name It, and They Will Come</Breadcrumb.Item>
  </Breadcrumb>
)

const Layout = (props) => {

  return (
    <BothSidesLayout
      menus={NAVS}
      leftContainer={(<div>Header左侧区域</div>)}
      rightContainer={(<div>Header右侧区域</div>)}
      pageTitle='内容区的标题'
      onBackArrowClick={() => {
        window.history.back()
      }}
      breadcrumb={breadcrumb}
    >
      {props.children}
    </BothSidesLayout>
  )
}

```

## Layout 下包括以下组件：

|      组件                   |      介绍            |      
|  :----------------:        |   :----------------: 
|   Layout.Header            |  整体的Header区域        |
|   Layout.Container         |  页面整体的内容区域        |
|   Layout.Sider             |  菜单栏                  |
|   Layout.VerticalLayout    |  固定布局中的左侧菜单布局   |
|   Layout.HozLayout         |  固定布局中的头部菜单布局   |
|   Layout.BothSidesLayout   |  固定布局中的二级菜单布局   |