Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 262b456

Browse files
bodynobodyno
committed
Added antd layout
1 parent f787b0c commit 262b456

File tree

3 files changed

+220
-10
lines changed

3 files changed

+220
-10
lines changed

‎src/layouts/CoreLayout/CoreLayout.js

Lines changed: 75 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,83 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import Header from '../../components/Header'
33
import classes from './CoreLayout.scss'
44
import '../../styles/core.scss'
55

6-
export const CoreLayout = ({ children }) => (
7-
<div className='container text-center'>
8-
<Header />
9-
<div className={classes.mainContainer}>
10-
{children}
11-
</div>
6+
import { Menu, Breadcrumb, Icon } from 'antd'
7+
import 'antd/dist/antd.css'
8+
9+
class CoreLayout extends Component {
10+
constructor(props) {
11+
super(props)
12+
this.state = {
13+
collapse: true
14+
}
15+
}
16+
17+
onCollapseChange() {
18+
this.setState({
19+
collapse: !this.state.collapse,
20+
})
21+
}
22+
23+
render() {
24+
const collapse = this.state.collapse
25+
return (
26+
<div className={collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}>
27+
<aside className="ant-layout-sider">
28+
<div className="ant-layout-logo"></div>
29+
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
30+
<Menu.Item key="user">
31+
<Icon type="user" /><span className="nav-text">导航一</span>
32+
</Menu.Item>
33+
<Menu.Item key="setting">
34+
<Icon type="setting" /><span className="nav-text">导航二</span>
35+
</Menu.Item>
36+
<Menu.Item key="laptop">
37+
<Icon type="laptop" /><span className="nav-text">导航三</span>
38+
</Menu.Item>
39+
<Menu.Item key="notification">
40+
<Icon type="notification" /><span className="nav-text">导航四</span>
41+
</Menu.Item>
42+
<Menu.Item key="folder">
43+
<Icon type="folder" /><span className="nav-text">导航五</span>
44+
</Menu.Item>
45+
</Menu>
46+
<div className="ant-aside-action" onClick={this.onCollapseChange.bind(this)}>
47+
{collapse ? <Icon type="right" /> : <Icon type="left" />}
48+
</div>
49+
</aside>
50+
<div className="ant-layout-main">
51+
<div className="ant-layout-header"></div>
52+
<div className="ant-layout-breadcrumb">
53+
<Breadcrumb>
54+
<Breadcrumb.Item>首页</Breadcrumb.Item>
55+
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
56+
<Breadcrumb.Item>某应用</Breadcrumb.Item>
57+
</Breadcrumb>
58+
</div>
59+
<div className="ant-layout-container">
60+
<div className="ant-layout-content">
61+
<div style={{ height: 220 }}>
62+
内容区域
63+
</div>
64+
</div>
65+
</div>
66+
<div className="ant-layout-footer">
67+
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
68+
</div>
69+
</div>
70+
</div>
71+
);
72+
}
73+
}
74+
75+
/*export const CoreLayout = ({ children }) => (
76+
<div>
77+
<Layout/>
78+
{children}
1279
</div>
13-
)
80+
)*/
1481

1582
CoreLayout.propTypes = {
1683
children: React.PropTypes.element.isRequired

‎src/layouts/CoreLayout/CoreLayout.scss

Lines changed: 139 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,140 @@
1-
.mainContainer {
2-
padding-top:20px;
1+
:global {
2+
.ant-layout-aside {
3+
position: relative;
4+
min-height: 100%;
5+
}
6+
7+
.ant-layout-aside .ant-layout-logo {
8+
width: 150px;
9+
height: 32px;
10+
background: #333;
11+
border-radius: 6px;
12+
margin: 16px 24px 16px 28px;
13+
transition: all 0.3s ease;
14+
}
15+
16+
.ant-layout-aside-collapse .ant-layout-logo {
17+
width: 32px;
18+
margin: 16px;
19+
transition: all 0.3s ease;
20+
}
21+
22+
.ant-layout-aside .ant-layout-sider {
23+
width: 224px;
24+
background: #404040;
25+
position: absolute;
26+
overflow: visible;
27+
padding-bottom: 24px;
28+
height: 100%;
29+
transition: all 0.3s ease;
30+
}
31+
32+
.ant-layout-aside-collapse .ant-layout-sider {
33+
width: 64px;
34+
transition: all 0.3s ease;
35+
}
36+
37+
.ant-layout-aside .ant-layout-sider > .ant-menu {
38+
margin-bottom: 20px;
39+
}
40+
41+
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
42+
margin: 16px 0;
43+
}
44+
45+
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
46+
vertical-align: baseline;
47+
display: inline-block;
48+
}
49+
50+
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
51+
transition: font-size .3s;
52+
}
53+
54+
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
55+
transition: all 0s ease;
56+
}
57+
58+
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
59+
font-size: 16px;
60+
display: inline-block;
61+
}
62+
63+
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
64+
display: none;
65+
}
66+
67+
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
68+
background: #2db7f5;
69+
color: #fff;
70+
transition: all 0s ease;
71+
}
72+
73+
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
74+
display: inline-block;
75+
vertical-align: top;
76+
background: #2db7f5;
77+
color: #fff;
78+
padding-right: 16px;
79+
border-radius: 0 5px 5px 0;
80+
}
81+
82+
/* 实际使用中需要改成 position: fixed */
83+
.ant-layout-aside .ant-aside-action {
84+
height: 42px;
85+
width: 224px;
86+
position: absolute;
87+
bottom: 0;
88+
background: #656565;
89+
color: #fff;
90+
text-align: center;
91+
line-height: 42px;
92+
cursor: pointer;
93+
transition: all 0.3s ease;
94+
}
95+
96+
.ant-layout-aside-collapse .ant-aside-action {
97+
width: 64px;
98+
transition: all 0.3s ease;
99+
}
100+
101+
.ant-layout-aside .ant-layout-header {
102+
background: #fff;
103+
height: 64px;
104+
border-bottom: 1px solid #e9e9e9;
105+
}
106+
107+
.ant-layout-aside .ant-layout-breadcrumb {
108+
margin: 7px 0 -17px 24px;
109+
}
110+
111+
.ant-layout-aside .ant-layout-main {
112+
margin-left: 224px;
113+
transition: all 0.3s ease;
114+
}
115+
116+
.ant-layout-aside-collapse .ant-layout-main {
117+
margin-left: 64px;
118+
transition: all 0.3s ease;
119+
}
120+
121+
.ant-layout-aside .ant-layout-container {
122+
margin: 24px 16px;
123+
}
124+
125+
.ant-layout-aside .ant-layout-content {
126+
background: #fff;
127+
padding: 24px;
128+
}
129+
130+
.ant-layout-aside .ant-layout-footer {
131+
height: 64px;
132+
line-height: 64px;
133+
text-align: center;
134+
font-size: 12px;
135+
color: #999;
136+
background: #fff;
137+
border-top: 1px solid #e9e9e9;
138+
width: 100%;
139+
}
3140
}

‎src/styles/core.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@
3636
}
3737
}
3838

39+
ul, li {
40+
list-style: none;
41+
padding: 0;
42+
margin: 0;
43+
}
44+
3945
.container{
4046
width:1000px;
4147
margin:0 auto;

0 commit comments

Comments
 (0)