提供常用网页布局
##### **基础布局**
```jsx
import {Layout} from 'dbox-ui';
const Header = Layout.Header;
const Content = Layout.Content;
const Footer = Layout.Footer;
const Sider = Layout.Sider;
内容
侧边栏
内容
侧边栏
内容
```
##### **顶部导航**
顺应了从上至下的正常浏览顺序，方便浏览信息；适用于导航较少，页面篇幅较长的网站。
```jsx
import {Menu, Breadcrumb, Layout} from 'dbox-ui';
const SubMenu = Menu.SubMenu;
const Header = Layout.Header;
const Content = Layout.Content;
class LayoutView extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 'platform'
}
this.handleClick = this.handleClick.bind(this)
};
handleClick (e) {
this.setState({
current: e.key,
})
}
render() {
return (
首页
订单中心
子菜单
内容
)
}
}
```
##### **侧边导航-面包屑**
搭配传统面包屑的侧边导航，提高导航可见性，方便页面之间切换，常用于中后台网站。
```jsx
import {Menu, Breadcrumb, Avatar, Icon, Dropdown, Layout} from 'dbox-ui';
const SubMenu = Menu.SubMenu;
const Header = Layout.Header;
const Content = Layout.Content;
const Sider = Layout.Sider;
const DropdownNormal = Dropdown.DropdownNormal;
const menu = (
)
class LayoutView extends React.Component {
constructor(props) {
super(props);
const panes = [
{ title: , content: '首页', key: '7' }
];
this.state = {
current: 'home',
flag: false,
openKeys: ['item_1'],
modeMenu: 'inline',
mode: 'top',
panes,
activeKey: panes[0].key
}
this.handleClickBread = this.handleClickBread.bind(this)
this.changeModel = this.changeModel.bind(this)
this.onOpenChange = this.onOpenChange.bind(this)
this.inlineMenu = this.inlineMenu.bind(this)
};
handleClickBread (e) {
this.setState({
current: e.key,
})
}
changeModel () {
this.setState({
modeMenu: !this.state.flag ? 'vertical' : 'inline',
flag: !this.state.flag,
openKeys: [],
})
}
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(i => this.state.openKeys.indexOf(i) === -1);
this.setState({
openKeys: latestOpenKey ? [latestOpenKey] : [],
});
}
inlineMenu () {
if (this.state.flag) {
return (
)
} else {
return (
)
}
}
render() {
return (
{this.inlineMenu()}
首页
订单中心
子菜单
内容
)
}
}
```
##### **侧边导航-Tab页**
用Tab页签代替面包屑的侧边导航，提高常用页面切换的灵活性。
```jsx
import{Menu, Avatar, Tabs, Icon, Dropdown, Layout} from 'dbox-ui';
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const Header = Layout.Header;
const Content = Layout.Content;
const Sider = Layout.Sider;
const DropdownNormal = Dropdown.DropdownNormal;
const menu = (
)
const array = [];
class LayoutView extends React.Component {
constructor(props) {
super(props);
const panes = [
{ title: , content: '首页', key: '27' }
];
this.state = {
openKeys: ['sub1'],
flag: false,
modeMenu: 'inline',
mode: 'top',
panes,
activeKey: panes[0].key
}
this.handleClickTabs = this.handleClickTabs.bind(this)
this.changeModel = this.changeModel.bind(this)
this.onChange = this.onChange.bind(this)
this.onEdit = this.onEdit.bind(this)
this.add = this.add.bind(this)
this.remove = this.remove.bind(this)
this.onOpenChange = this.onOpenChange.bind(this)
this.inlineMenu = this.inlineMenu.bind(this)
};
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(i => this.state.openKeys.indexOf(i) === -1);
this.setState({
openKeys: latestOpenKey ? [latestOpenKey] : [],
});
}
handleClickTabs (e) {
array.push(...e.keyPath)
this.setState({
current: e.key,
activeKey: e.key
});
if (this.state.panes.findIndex(i => i.key === e.key) !== -1) {
return false
} else {
this.add(e.key, e.item.props.title)
}
}
changeModel () {
this.setState({
modeMenu: !this.state.flag ? 'vertical' : 'inline',
flag: !this.state.flag,
openKeys: [],
})
}
onChange (activeKey) {
const id = array.indexOf(activeKey) + 1
this.setState({ activeKey, openKeys: [array[id]] });
}
onEdit (targetKey, action) {
this[action](targetKey);
}
add (key, title) {
const panes = this.state.panes;
const activeKey = key;
panes.push({ title: title, content: title, key: activeKey });
this.setState({panes, activeKey});
}
remove (targetKey) {
let activeKey = this.state.activeKey;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (lastIndex >= 0 && activeKey === targetKey) {
activeKey = panes[lastIndex].key;
}
const id = array.indexOf(activeKey) + 1
this.setState({
panes,
activeKey,
openKeys: [array[id]]});
}
inlineMenu () {
if (this.state.flag) {
return (
)
} else {
return (
)
}
}
render() {
return (
{this.inlineMenu()}
{this.state.panes.map(pane => {pane.content})}
)
}
}
```
##### **API**
Layout
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-------------------------------------|--------------------|-------------|
| className | 容器 className | string | - |
| style | 样式 | object | - |
-具体API可参考使用的组件API
```jsx noeditor
import {BackTop} from 'dbox-ui';
import LayoutView from '../prevPage/layout';
```