@b-design/ui-layout

@b-design/ui-layout

安装

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

介绍

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

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

使用示例

基本使用

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>
  )

}

固定布局

使用左侧菜单固定布局

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>
  )
}

使用横向导航的页面布局

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>
  )
}

使用二级导航的页面布局

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	固定布局中的二级菜单布局