Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
2b59fbed
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
2b59fbed
编写于
11月 14, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add common layout
上级
8ea8d8f5
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
181 addition
and
58 deletion
+181
-58
site/static/style.css
site/static/style.css
+4
-3
spec/layout/demo/aside.md
spec/layout/demo/aside.md
+58
-17
spec/layout/demo/top-aside.md
spec/layout/demo/top-aside.md
+66
-18
spec/layout/demo/top.md
spec/layout/demo/top.md
+42
-13
style/components/menu.less
style/components/menu.less
+11
-7
未找到文件。
site/static/style.css
浏览文件 @
2b59fbed
...
...
@@ -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
:
4
0
0px
;
overflow
:
auto
;
height
:
4
4
0px
;
position
:
relative
;
border-radius
:
0
0
5px
5px
;
background
:
#f4f4f4
;
}
.window-frame
.status-bar
{
height
:
2rem
;
...
...
spec/layout/demo/aside.md
浏览文件 @
2b59fbed
...
...
@@ -7,16 +7,38 @@
---
````
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-container"
>
<
div
className
=
"ant-layout-breadcrumb"
>
<
Breadcrumb
>
<
Breadcrumb
.
Item
>
首页
</
Breadcrumb
.
Item
>
...
...
@@ -24,8 +46,9 @@ ReactDOM.render(
<
Breadcrumb
.
Item
>
某应用
</
Breadcrumb
.
Item
>
</
Breadcrumb
>
</
div
>
<
div
className
=
"ant-layout-container"
>
<
div
className
=
"ant-layout-content"
>
<
div
style
=
{
{
height
:
2
90
}
}
></
div
>
<
div
style
=
{
{
height
:
5
90
}
}
></
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
240
px
;
margin
:
24px
16
px
;
}
.ant-layout-aside
.ant-layout-content
{
background
:
#fff
;
margin-top
:
24px
;
padding
:
24px
;
}
````
spec/layout/demo/top-aside.md
浏览文件 @
2b59fbed
...
...
@@ -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
#
e9e9e
9
;
border-bottom
:
1px
solid
#
d9d9d
9
;
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
#
e9e9e
9
;
margin-left
:
22
4
px
;
border-left
:
1px
solid
#
d9d9d
9
;
margin-left
:
22
3
px
;
}
````
spec/layout/demo/top.md
浏览文件 @
2b59fbed
...
...
@@ -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
#
e9e9e
9
;
border-bottom
:
1px
solid
#
d9d9d
9
;
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
浏览文件 @
2b59fbed
...
...
@@ -10,7 +10,7 @@
box-shadow: @overlay-shadow;
color: @text-color;
background: #fff;
line-height:
50
px;
line-height:
46
px;
&-hidden {
display: none;
...
...
@@ -25,7 +25,7 @@
color: #999;
line-height: 1.5;
padding: 8px 10px;
border-bottom: 1px solid #d
edede
;
border-bottom: 1px solid #d
9d9d9
;
}
&-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 #
e9e9e
9;
border-right: 1px solid #
d9d9d
9;
.@{menu-prefix-cls}-item {
border-right: 2px solid transparent;
margin-left: -1px;
...
...
@@ -156,7 +161,7 @@
&-submenu-title {
.anticon {
width: 14px;
margin-right:
8
px;
margin-right:
9
px;
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
20
px;
padding: 0
px 16px 0 28
px;
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;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录