ant-design/docs/spec/layout/demo/top-aside.md

146 lines
4.1 KiB
Markdown
Raw Normal View History

2015-11-09 18:05:23 +08:00
# 顶部导航 + 侧边栏
2015-11-09 19:40:35 +08:00
- order: 1
2015-11-09 18:05:23 +08:00
顶级导航在头部,次级导航在侧边栏。
---
````jsx
2015-11-14 20:41:10 +08:00
import { Menu, Breadcrumb, Icon } from 'antd';
2016-03-23 10:43:43 +08:00
import BrowserDemo from 'BrowserDemo';
2015-11-14 20:41:10 +08:00
const SubMenu = Menu.SubMenu;
2015-11-09 19:40:35 +08:00
2015-11-09 18:05:23 +08:00
ReactDOM.render(
2015-11-09 21:00:30 +08:00
<BrowserDemo>
<div className="ant-layout-topaside">
2015-11-14 20:41:10 +08:00
<div className="ant-layout-header">
<div className="ant-layout-wrapper">
<div className="ant-layout-logo"></div>
<Menu theme="dark" mode="horizontal"
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
<Menu.Item key="1">导航一</Menu.Item>
<Menu.Item key="2">导航二</Menu.Item>
<Menu.Item key="3">导航三</Menu.Item>
</Menu>
</div>
</div>
<div className="ant-layout-subheader">
<div className="ant-layout-wrapper">
<Menu mode="horizontal"
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
<Menu.Item key="1">二级导航</Menu.Item>
<Menu.Item key="2">二级导航</Menu.Item>
<Menu.Item key="3">二级导航</Menu.Item>
</Menu>
</div>
</div>
<div className="ant-layout-wrapper">
2015-11-09 21:00:30 +08:00
<div className="ant-layout-breadcrumb">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb>
</div>
<div className="ant-layout-container">
<aside className="ant-layout-sider">
2015-11-14 20:41:10 +08:00
<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
2015-11-09 21:00:30 +08:00
</aside>
<div className="ant-layout-content">
2015-12-28 13:56:10 +08:00
<div style={{ height: 240 }}>
<div style={{clear: 'both'}}>内容区域</div>
</div>
2015-11-09 21:00:30 +08:00
</div>
2015-11-09 19:40:35 +08:00
</div>
2015-11-14 21:08:43 +08:00
<div className="ant-layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
</div>
2015-11-09 19:40:35 +08:00
</div>
</div>
2015-11-09 21:00:30 +08:00
</BrowserDemo>
2016-01-08 18:10:58 +08:00
, mountNode);
2015-11-09 18:05:23 +08:00
````
````css
2015-11-09 19:40:35 +08:00
.ant-layout-topaside {
2015-11-09 21:00:30 +08:00
height: 100%;
2015-11-09 19:40:35 +08:00
}
2015-11-14 20:41:10 +08:00
.ant-layout-topaside .ant-layout-wrapper {
padding: 0 50px;
}
2015-11-09 19:40:35 +08:00
.ant-layout-topaside .ant-layout-header {
2015-11-14 20:41:10 +08:00
background: #404040;
2015-11-09 19:40:35 +08:00
height: 64px;
}
2015-11-14 20:41:10 +08:00
.ant-layout-topaside .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
2015-11-09 19:40:35 +08:00
.ant-layout-topaside .ant-layout-subheader {
height: 48px;
2015-11-14 21:08:43 +08:00
border-bottom: 1px solid #e9e9e9;
2015-11-09 19:40:35 +08:00
background: #fff;
}
.ant-layout-topaside .ant-layout-breadcrumb {
2015-11-14 20:41:10 +08:00
margin: 7px 0 -17px 24px;
2015-11-09 19:40:35 +08:00
}
.ant-layout-topaside .ant-layout-container {
background: #fff;
2015-11-14 21:12:02 +08:00
margin: 24px 0 0;
2015-11-09 19:40:35 +08:00
position: relative;
2015-11-14 20:41:10 +08:00
padding: 24px 0;
overflow: hidden;
2015-11-09 19:40:35 +08:00
}
.ant-layout-topaside .ant-layout-sider {
width: 224px;
2015-11-14 20:41:10 +08:00
float: left;
2015-11-09 19:40:35 +08:00
}
.ant-layout-topaside .ant-layout-content {
2015-11-14 21:08:43 +08:00
border-left: 1px solid #e9e9e9;
2015-12-28 13:56:10 +08:00
padding: 0 24px;
2015-12-28 14:07:07 +08:00
overflow: auto;
2015-12-28 13:56:10 +08:00
position: relative;
left: -1px;
2015-11-09 19:40:35 +08:00
}
2015-11-14 21:08:43 +08:00
.ant-layout-topaside .ant-layout-footer {
2015-12-28 14:23:12 +08:00
height: 64px;
2015-11-14 21:12:02 +08:00
line-height: 64px;
2015-11-14 21:08:43 +08:00
text-align: center;
font-size: 12px;
color: #999;
}
2015-11-09 19:40:35 +08:00
````