home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-26 21:26:26 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add common layout

Browse Source
This commit is contained in:
afc163
2015-11-14 20:41:10 +08:00
parent 8ea8d8f547
commit 2b59fbeded
5 changed files with 181 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/static/style.css
+4 -3
View File
@@ -2010,7 +2010,7 @@ a.entry-link:hover .anticon-smile {
padding: 0;
border-radius: 5px;
border: 1px solid #ccc;
background-color: white;
background-color: #fff;
line-height: 1;
}
@@ -2091,10 +2091,11 @@ a.entry-link:hover .anticon-smile {
.window-frame .window-content {
padding: 0;
line-height: 1.5;
overflow: hidden;
height: 400px;
overflow: auto;
height: 440px;
position: relative;
border-radius: 0 0 5px 5px;
background: #f4f4f4;
}
.window-frame .status-bar {
height: 2rem;
spec/layout/demo/aside.md
+58 -17
View File
@@ -7,25 +7,48 @@
---
````jsx
import { Menu, Breadcrumb } from 'antd';
import { Menu, Breadcrumb, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
ReactDOM.render(
<BrowserDemo>
<div className="ant-layout-aside">
<aside className="ant-layout-sider">
<div className="ant-layout-logo"></div>
<Menu mode="inline" theme="dark"
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>
</aside>
<div className="ant-layout-main">
<div className="ant-layout-header"></div>
<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 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 style={{ height: 590 }}></div>
</div>
</div>
</div>
@@ -36,15 +59,29 @@ ReactDOM.render(
````css
.ant-layout-aside {
background: #f4f4f4;
height: 100%;
position: relative;
min-height: 100%;
overflow: hidden;
}
.ant-layout-aside .ant-layout-logo {
width: 150px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 24px 16px 28px;
}
.ant-layout-aside .ant-layout-sider {
width: 224px;
height: 100%;
background: #404040;
position: absolute;
background: #373737;
padding-bottom: 24px;
min-height: 100%;
}
.ant-layout-aside .ant-layout-sider > .ant-menu {
margin-bottom: 20px;
}
.ant-layout-aside .ant-layout-header {
@@ -54,16 +91,20 @@ ReactDOM.render(
}
.ant-layout-aside .ant-layout-breadcrumb {
margin-top: 7px;
margin-bottom: -17px;
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px;
margin-bottom: 24px;
}
.ant-layout-aside .ant-layout-container {
margin: 0 16px 16px 240px;
margin: 24px 16px;
}
.ant-layout-aside .ant-layout-content {
background: #fff;
margin-top: 24px;
padding: 24px;
}
````
spec/layout/demo/top-aside.md
+66 -18
View File
@@ -7,14 +7,34 @@
---
````jsx
import { Menu, Breadcrumb } from 'antd';
import { Menu, Breadcrumb, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
ReactDOM.render(
<BrowserDemo>
<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-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">
<div className="ant-layout-breadcrumb">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
@@ -24,6 +44,26 @@ ReactDOM.render(
</div>
<div className="ant-layout-container">
<aside className="ant-layout-sider">
<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>
</aside>
<div className="ant-layout-content">
<div style={{ height: 240 }}></div>
@@ -37,44 +77,52 @@ ReactDOM.render(
````css
.ant-layout-topaside {
background: #f4f4f4;
height: 100%;
}
.ant-layout-topaside .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-topaside .ant-layout-header {
background: #373737;
background: #404040;
height: 64px;
}
.ant-layout-topaside .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
.ant-layout-topaside .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
border-bottom: 1px solid #d9d9d9;
background: #fff;
}
.ant-layout-topaside .ant-layout-breadcrumb {
margin-top: 7px;
margin-bottom: -17px;
}
.ant-layout-topaside .ant-layout-main {
padding: 0 50px;
margin: 7px 0 -17px 24px;
}
.ant-layout-topaside .ant-layout-container {
background: #fff;
margin-top: 24px;
margin: 24px 0;
position: relative;
padding: 24px 0;
overflow: hidden;
}
.ant-layout-topaside .ant-layout-sider {
width: 224px;
height: 100%;
position: absolute;
float: left;
}
.ant-layout-topaside .ant-layout-content {
border-left: 1px solid #e9e9e9;
margin-left: 224px;
border-left: 1px solid #d9d9d9;
margin-left: 223px;
}
````
spec/layout/demo/top.md
+42 -13
View File
@@ -14,9 +14,28 @@ import { Menu, Breadcrumb } from 'antd';
ReactDOM.render(
<BrowserDemo>
<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-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">
<div className="ant-layout-breadcrumb">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
@@ -35,32 +54,42 @@ ReactDOM.render(
````css
.ant-layout-top {
background: #f4f4f4;
height: 100%;
}
.ant-layout-top .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-top .ant-layout-header {
background: #373737;
background: #404040;
height: 64px;
}
.ant-layout-top .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
.ant-layout-top .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
border-bottom: 1px solid #d9d9d9;
background: #fff;
}
.ant-layout-top .ant-layout-breadcrumb {
margin-top: 7px;
margin-bottom: -17px;
}
.ant-layout-top .ant-layout-main {
padding: 0 50px;
margin: 7px 0 -17px 24px;
}
.ant-layout-top .ant-layout-container {
background: #fff;
margin-top: 24px;
margin: 24px 0;
position: relative;
padding-top: 24px;
overflow: hidden;
}
````
style/components/menu.less
+11 -7
View File
@@ -10,7 +10,7 @@
box-shadow: @overlay-shadow;
color: @text-color;
background: #fff;
line-height: 50px;
line-height: 46px;
&-hidden {
display: none;
@@ -25,7 +25,7 @@
color: #999;
line-height: 1.5;
padding: 8px 10px;
border-bottom: 1px solid #dedede;
border-bottom: 1px solid #d9d9d9;
}
&-item,
@@ -41,6 +41,11 @@
background-color: tint(@primary-color, 90%);
}
&-horizontal &-item,
&-horizontal &-submenu {
margin-top: -1px;
}
&-horizontal > &-item-active,
&-horizontal > &-submenu &-submenu-title:hover {
background-color: transparent;
@@ -52,7 +57,7 @@
&-inline,
&-vertical {
border-right: 1px solid #e9e9e9;
border-right: 1px solid #d9d9d9;
.@{menu-prefix-cls}-item {
border-right: 2px solid transparent;
margin-left: -1px;
@@ -156,7 +161,7 @@
&-submenu-title {
.anticon {
width: 14px;
margin-right: 8px;
margin-right: 9px;
top: 1px;
}
}
@@ -165,7 +170,6 @@
border: none;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
padding-left: 20px;
z-index: 0;
> .@{menu-prefix-cls}-item,
@@ -211,7 +215,7 @@
&-vertical, &-inline {
& > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
padding: 0 20px;
padding: 0px 16px 0 28px;
font-size: 12px;
line-height: 42px;
height: 42px;
@@ -264,7 +268,7 @@
&-dark&-horizontal > &-item,
&-dark&-horizontal > &-submenu {
border-bottom: 2px solid transparent;
border-bottom: 0;
top: 0;
}