mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
Improve layout spec demo style
This commit is contained in:
afc163
parent
4b08601f0f
commit
cee6fa49e8
@ -24,9 +24,9 @@ const AsideCollapse = React.createClass({
|
||||
render() {
|
||||
const collapse = this.state.collapse;
|
||||
return (
|
||||
<div className={collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}>
|
||||
<aside className="ant-layout-sider">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<div className={collapse ? "layout-aside layout-aside-collapse" : "layout-aside"}>
|
||||
<aside className="layout-sider">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
|
||||
<Menu.Item key="user">
|
||||
<Icon type="user" />
|
||||
@ -49,27 +49,25 @@ const AsideCollapse = React.createClass({
|
||||
{!collapse && <span className="nav-text">导航五</span>}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<div className="ant-aside-action" onClick={this.onCollapseChange}>
|
||||
<div className="aside-action" onClick={this.onCollapseChange}>
|
||||
{collapse ? <Icon type="right" /> : <Icon type="left" />}
|
||||
</div>
|
||||
</aside>
|
||||
<div className="ant-layout-main">
|
||||
<div className="ant-layout-header"></div>
|
||||
<div className="ant-layout-breadcrumb">
|
||||
<div className="layout-main">
|
||||
<div className="layout-header"></div>
|
||||
<div className="layout-container">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ant-layout-container">
|
||||
<div className="ant-layout-content">
|
||||
<div className="layout-content">
|
||||
<div style={{ height: 220 }}>
|
||||
内容区域
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
<div className="layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
@ -82,78 +80,77 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-aside {
|
||||
.layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
.layout-aside .layout-logo {
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-logo {
|
||||
.layout-aside-collapse .layout-logo {
|
||||
width: 32px;
|
||||
margin: 16px;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
.layout-aside .layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-sider {
|
||||
.layout-aside-collapse .layout-sider {
|
||||
width: 64px;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
.layout-aside .layout-sider > .menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
|
||||
.layout-aside .layout-sider > .menu > .menu-item {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
|
||||
.layout-aside .layout-sider > .menu > .menu-item .nav-text {
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
|
||||
.layout-aside .layout-sider > .menu > .menu-item > .anticon {
|
||||
transition: font-size .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item {
|
||||
transition: all 0s ease;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item > .anticon {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item .nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover {
|
||||
background: #2db7f5;
|
||||
color: #fff;
|
||||
transition: all 0s ease;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover .nav-text {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: #2db7f5;
|
||||
@ -163,7 +160,7 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
|
||||
}
|
||||
|
||||
/* 实际使用中需要改成 position: fixed */
|
||||
.ant-layout-aside .ant-aside-action {
|
||||
.layout-aside .aside-action {
|
||||
height: 42px;
|
||||
width: 224px;
|
||||
position: absolute;
|
||||
@ -173,44 +170,42 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-aside-action {
|
||||
.layout-aside-collapse .aside-action {
|
||||
width: 64px;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
.layout-aside .layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
.layout-aside .layout-main {
|
||||
margin-left: 224px;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside-collapse .ant-layout-main {
|
||||
.layout-aside-collapse .layout-main {
|
||||
margin-left: 64px;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
.layout-aside .layout-container {
|
||||
margin: 12px 16px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
.layout-aside .layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
margin-top: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
.layout-aside .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
|
||||
@ -14,9 +14,9 @@ const SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-aside">
|
||||
<aside className="ant-layout-sider">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<div className="layout-aside">
|
||||
<aside className="layout-sider">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu mode="inline" theme="dark"
|
||||
defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
|
||||
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
|
||||
@ -39,23 +39,21 @@ ReactDOM.render(
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</aside>
|
||||
<div className="ant-layout-main">
|
||||
<div className="ant-layout-header"></div>
|
||||
<div className="ant-layout-breadcrumb">
|
||||
<div className="layout-main">
|
||||
<div className="layout-header"></div>
|
||||
<div className="layout-container">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ant-layout-container">
|
||||
<div className="ant-layout-content">
|
||||
<div className="layout-content">
|
||||
<div style={{ height: 590 }}>
|
||||
内容区域
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
<div className="layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
@ -65,20 +63,19 @@ ReactDOM.render(
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-aside {
|
||||
.layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
.layout-aside .layout-logo {
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
.layout-aside .layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
@ -87,34 +84,32 @@ ReactDOM.render(
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
.layout-aside .layout-sider > .menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
.layout-aside .layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
.layout-aside .layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
.layout-aside .layout-container {
|
||||
margin: 12px 16px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
.layout-aside .layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
margin-top: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
.layout-aside .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
|
||||
@ -13,9 +13,9 @@ import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-ceiling-demo">
|
||||
<div className="ant-layout-ceiling">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="layout-ceiling-demo">
|
||||
<div className="layout-ceiling">
|
||||
<div className="layout-wrapper">
|
||||
<ul className="right">
|
||||
<li>xxx@example.com</li>
|
||||
<li>|</li>
|
||||
@ -25,9 +25,9 @@ ReactDOM.render(
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-header">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<div className="layout-header">
|
||||
<div className="layout-wrapper">
|
||||
<div className="layout-logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -36,11 +36,11 @@ ReactDOM.render(
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-ceiling-demo {
|
||||
.layout-ceiling-demo {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-ceiling {
|
||||
.layout-ceiling {
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -48,31 +48,31 @@ ReactDOM.render(
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.ant-layout-ceiling .right {
|
||||
.layout-ceiling .right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ant-layout-ceiling ul li {
|
||||
.layout-ceiling ul li {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.ant-layout-ceiling-demo .ant-layout-wrapper {
|
||||
.layout-ceiling-demo .layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.ant-layout-ceiling-demo .ant-layout-header {
|
||||
.layout-ceiling-demo .layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-ceiling-demo .ant-layout-logo {
|
||||
.layout-ceiling-demo .layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #eee;
|
||||
border-radius: 6px;
|
||||
margin: 16px 28px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
````
|
||||
|
||||
@ -12,10 +12,10 @@ const SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-topaside">
|
||||
<div className="ant-layout-header">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<div className="layout-topaside">
|
||||
<div className="layout-header">
|
||||
<div className="layout-wrapper">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu theme="dark" mode="horizontal"
|
||||
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
||||
<Menu.Item key="1">导航一</Menu.Item>
|
||||
@ -24,8 +24,8 @@ ReactDOM.render(
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-subheader">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="layout-subheader">
|
||||
<div className="layout-wrapper">
|
||||
<Menu mode="horizontal"
|
||||
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
||||
<Menu.Item key="1">二级导航</Menu.Item>
|
||||
@ -34,16 +34,14 @@ ReactDOM.render(
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-wrapper">
|
||||
<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">
|
||||
<div className="layout-wrapper">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="layout-container">
|
||||
<aside className="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>
|
||||
@ -65,13 +63,13 @@ ReactDOM.render(
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</aside>
|
||||
<div className="ant-layout-content">
|
||||
<div className="layout-content">
|
||||
<div style={{ height: 240 }}>
|
||||
<div style={{clear: 'both'}}>内容区域</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
<div className="layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
@ -81,52 +79,50 @@ ReactDOM.render(
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-topaside {
|
||||
.layout-topaside {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-wrapper {
|
||||
.layout-topaside .layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-header {
|
||||
.layout-topaside .layout-header {
|
||||
background: #404040;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-logo {
|
||||
.layout-topaside .layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 28px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-subheader {
|
||||
.layout-topaside .layout-subheader {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-container {
|
||||
.layout-topaside .layout-container {
|
||||
background: #fff;
|
||||
margin: 24px 0 0;
|
||||
margin: 12px 0 0;
|
||||
position: relative;
|
||||
padding: 24px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-sider {
|
||||
.layout-topaside .layout-sider {
|
||||
width: 224px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-content {
|
||||
.layout-topaside .layout-content {
|
||||
border-left: 1px solid #e9e9e9;
|
||||
padding: 0 24px;
|
||||
overflow: auto;
|
||||
@ -134,7 +130,7 @@ ReactDOM.render(
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-footer {
|
||||
.layout-topaside .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
|
||||
@ -15,10 +15,10 @@ import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-top">
|
||||
<div className="ant-layout-header">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<div className="layout-top">
|
||||
<div className="layout-header">
|
||||
<div className="layout-wrapper">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu theme="dark" mode="horizontal"
|
||||
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
||||
<Menu.Item key="1">导航一</Menu.Item>
|
||||
@ -27,8 +27,8 @@ ReactDOM.render(
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-subheader">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="layout-subheader">
|
||||
<div className="layout-wrapper">
|
||||
<Menu mode="horizontal"
|
||||
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
||||
<Menu.Item key="1">二级导航</Menu.Item>
|
||||
@ -37,19 +37,17 @@ ReactDOM.render(
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-wrapper">
|
||||
<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="layout-wrapper">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="layout-container">
|
||||
<div style={{ height: 210 }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
<div className="layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
@ -58,47 +56,45 @@ ReactDOM.render(
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-top {
|
||||
.layout-top {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-wrapper {
|
||||
.layout-top .layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-header {
|
||||
.layout-top .layout-header {
|
||||
background: #404040;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-logo {
|
||||
.layout-top .layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 28px 16px 0;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-subheader {
|
||||
.layout-top .layout-subheader {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-container {
|
||||
.layout-top .layout-container {
|
||||
background: #fff;
|
||||
margin: 24px 0 0;
|
||||
margin: 12px 0 0;
|
||||
position: relative;
|
||||
padding-top: 24px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-footer {
|
||||
.layout-top .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user