mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 19:50:05 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Add basic layout code

Browse Source
This commit is contained in:
afc163 2015-11-09 19:40:35 +08:00
parent 51a5a5d64d
commit 256c60fe8a
3 changed files with 166 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
spec/layout/demo/aside.md
View File

@ -1,20 +1,69 @@
# 侧边导航
- order: 2
顶级导航在侧边栏。
---
````jsx
import { Menu, Breadcrumb } from 'antd';
ReactDOM.render(
<div className="ant-common-layout">
布局示例
<div className="ant-layout-aside">
<aside className="ant-layout-sider">
</aside>
<div className="ant-layout-main">
<div className="ant-layout-header"></div>
<div className="ant-layout-container">
<div className="ant-layout-breadcrumb">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb>
</div>
<div className="ant-layout-content">
<div style={{ height: 290 }}></div>
</div>
</div>
</div>
</div>
, document.getElementById('spec-layout-demo-aside'));
````
````css
.ant-common-layout {
background: #f9f9f9;
padding: 24px;
.ant-layout-aside {
background: #f4f4f4;
height: 400px;
overflow: hidden;
position: relative;
}
.ant-layout-aside .ant-layout-sider {
width: 224px;
height: 100%;
position: absolute;
background: #373737;
}
.ant-layout-aside .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.ant-layout-aside .ant-layout-breadcrumb {
margin-top: 7px;
margin-bottom: -17px;
}
.ant-layout-aside .ant-layout-container {
margin: 0 16px 16px 240px;
}
.ant-layout-aside .ant-layout-content {
background: #fff;
margin-top: 24px;
}
````

70
spec/layout/demo/top-aside.md
View File

@ -1,21 +1,79 @@
# 顶部导航 + 侧边栏
- order: 1
顶级导航在头部，次级导航在侧边栏。
---
````jsx
import { Menu, Breadcrumb } from 'antd';
ReactDOM.render(
<div className="ant-common-layout">
布局示例
<div className="ant-layout-topaside">
<div className="ant-layout-header"></div>
<div className="ant-layout-subheader"></div>
<div className="ant-layout-main">
<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">
</aside>
<div className="ant-layout-content">
<div style={{ height: 240 }}></div>
</div>
</div>
</div>
</div>
, document.getElementById('spec-layout-demo-top-aside'));
````
````css
.ant-common-layout {
background: #f9f9f9;
padding: 24px;
.ant-layout-topaside {
background: #f4f4f4;
height: 400px;
overflow: hidden;
}
.ant-layout-topaside .ant-layout-header {
background: #373737;
height: 64px;
}
.ant-layout-topaside .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
}
.ant-layout-topaside .ant-layout-breadcrumb {
margin-top: 7px;
margin-bottom: -17px;
}
.ant-layout-topaside .ant-layout-main {
padding: 0 50px;
}
.ant-layout-topaside .ant-layout-container {
background: #fff;
margin-top: 24px;
position: relative;
}
.ant-layout-topaside .ant-layout-sider {
width: 224px;
height: 100%;
position: absolute;
}
.ant-layout-topaside .ant-layout-content {
border-left: 1px solid #e9e9e9;
margin-left: 224px;
}
````

53
spec/layout/demo/top.md
View File

@ -1,20 +1,63 @@
# 顶部导航
- order: 0
一二级导航都在顶部。
---
````jsx
import { Menu, Breadcrumb } from 'antd';
ReactDOM.render(
<div className="ant-common-layout">
布局示例
<div className="ant-layout-top">
<div className="ant-layout-header"></div>
<div className="ant-layout-subheader"></div>
<div className="ant-layout-main">
<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">
<div style={{ height: 240 }}></div>
</div>
</div>
</div>
, document.getElementById('spec-layout-demo-top'));
````
````css
.ant-common-layout {
background: #f9f9f9;
padding: 24px;
.ant-layout-top {
background: #f4f4f4;
height: 400px;
overflow: hidden;
}
.ant-layout-top .ant-layout-header {
background: #373737;
height: 64px;
}
.ant-layout-top .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
}
.ant-layout-top .ant-layout-breadcrumb {
margin-top: 7px;
margin-bottom: -17px;
}
.ant-layout-top .ant-layout-main {
padding: 0 50px;
}
.ant-layout-top .ant-layout-container {
background: #fff;
margin-top: 24px;
}
````