@b-design/ui-layout
v0.0.10
Published
React component for Alibaba Cloud.
Downloads
27
Readme
@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 | 固定布局中的二级菜单布局 |