mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

Merge pull request #526 from ant-design/issue/314

Browse Source 
Issue/314  menu 视觉优化
This commit is contained in:
qiuyuntao 2015-11-13 21:11:25 +08:00
commit af289b9658
3 changed files with 162 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/menu/index.jsx
View File

@ -38,6 +38,10 @@ const AntMenu = React.createClass({
this.props.onClose();
},
render() {
this.theme = '';
if (this.props.theme) {
this.theme = this.props.theme;
}
let openAnimation = '';
switch (this.props.mode) {
case 'horizontal':
@ -51,14 +55,19 @@ const AntMenu = React.createClass({
break;
default:
}
let props = {
openKeys: this.state.openKeys,
onClick: this.handleClick,
onOpen: this.handleOpenKeys,
onClose: this.handleCloseKeys,
className: this.theme,
};
if (this.props.mode === 'inline') {
return <Menu {...this.props} openAnimation={openAnimation} />;
props = {
className: this.theme,
};
return <Menu {...this.props} {...props} openAnimation={openAnimation} />;
} else {
return <Menu {...this.props} {...props} openTransitionName={openAnimation} />;
}

1
components/menu/index.md
View File

@ -28,6 +28,7 @@
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| theme | 主题颜色 | enum: 'dark' | 默认为空 |
| mode | 菜单类型 | enum: 'vertical', 'horizontal', 'inline' | vertical |
| selectedKeys | 当前选中的菜单项 key 数组 | | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | | |

185
style/components/menu.less
View File

@ -1,14 +1,13 @@
@menu-prefix-cls: ~"@{css-prefix}menu";
// default theme
.@{menu-prefix-cls} {
outline: none;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
z-index: 999;
border: 1px solid #d9d9d9;
box-shadow: @overlay-shadow;
border-radius: @border-radius-base;
color: @text-color;
background: #fff;
@ -46,16 +45,35 @@
background-color: tint(@primary-color, 90%);
}
&-item-selected {
background-color: tint(@primary-color, 90%);
color: @primary-color;
}
& > li&-submenu {
cursor: pointer;
transition: all 0.3s ease;
}
&-vertical,
&-inline {
border-right: 1px solid #e9e9e9;
.@{menu-prefix-cls}-item {
border-right: 2px solid transparent;
margin-left: -1px;
left: 1px;
position: relative;
z-index: 1;
}
.@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-active {
border-right: 2px solid @primary-color;
}
.@{menu-prefix-cls}-item-selected {
background-color: tint(@primary-color, 90%);
color: @primary-color;
border-right: 2px solid #2db7f5;
}
}
&-submenu-horizontal > .@{menu-prefix-cls} {
top: 100%;
left: 0;
@ -147,12 +165,10 @@
}
&-horizontal {
background-color: #FBFBFB;
border: none;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
border-radius: 0;
padding-left: 24px;
padding-left: 20px;
z-index: 0;
& > .@{menu-prefix-cls}-item,
@ -186,12 +202,12 @@
& > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item {
float: left;
border-bottom: 2px solid transparent;
margin-right: 24px;
margin-right: 20px;
&-active,
&-selected {
border-bottom: 2px solid @primary-color;
background-color: #FBFBFB;
background-color: #FFF;
color: @primary-color;
.anticon {
color: @primary-color;
@ -208,32 +224,14 @@
}
&-vertical, &-inline {
padding: 12px 0;
& > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
padding: 0 24px;
padding: 0 20px;
font-size: 12px;
line-height: 42px;
height: 42px;
}
}
&-vertical, &-horizontal {
.@{menu-prefix-cls}-submenu {
.@{menu-prefix-cls}-item:first-child {
border-radius: @border-radius-base @border-radius-base 0 0;
}
.@{menu-prefix-cls}-item:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
&:first-child {
border-radius: @border-radius-base @border-radius-base 0 0;
}
&:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
}
&-vertical&-sub {
padding: 0;
transform-origin: 0 0;
@ -244,16 +242,13 @@
&-root&-vertical,
&-root&-inline {
border-radius: 0;
box-shadow: none;
}
&-sub&-inline {
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
overflow: hidden;
& > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
line-height: 34px;
height: 34px;
@ -270,3 +265,125 @@
top: -1px;
}
}
// dark theme
.dark.@{menu-prefix-cls} {
color: rgba(255, 255, 255, 0.45);
background: #404040;
.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-active,
.@{menu-prefix-cls}-submenu-vertical.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover,
.@{menu-prefix-cls}-submenu-inline.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover {
background: #404040;
color: #FFF;
.anticon {
color: #FFF;
}
}
.@{menu-prefix-cls}-submenu {
background: #404040;
}
&-horizontal {
background-color: #404040;
border: none;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
padding-left: 20px;
z-index: 0;
color: rgba(255, 255, 255, 0.45);
.@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected,
.@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
border-bottom: 0px;
background-color: #404040;
color: #FFF;
.anticon {
color: rgba(255, 255, 255, 1);
}
}
.@{menu-prefix-cls}-vertical {
.@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected,
.@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
background-color: #2DB7F5;
color: #FFF;
}
}
.@{menu-prefix-cls}-submenu-active {
border: 0;
color: #FFF;
.anticon {
color: rgba(255, 255, 255, 1);
}
}
& > .@{menu-prefix-cls}-item,
& > .@{menu-prefix-cls}-submenu {
border-bottom: 0px;
top: 0px;
> a , > span{
line-height: 51px;
}
> a {
color: rgba(255, 255, 255, 0.45);
&:hover {
color: rgba(255, 255, 255, 1);
}
&:before, &:after {
background-color: rgba(255, 255, 255, 0.001);
}
&:before {
left: 0;
}
}
}
}
.@{menu-prefix-cls}-vertical,
.@{menu-prefix-cls}-inline {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
color: rgba(255, 255, 255, 0.45);
}
.@{menu-prefix-cls}-item {
background-color: #333333;
}
}
&-vertical,
&-inline {
border-right: 0px solid #3F3F3F;
.@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected,
.@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
border-right: 0px solid #2DB7F5;
background-color: #2DB7F5;
color: #FFF;
}
}
.@{menu-prefix-cls}-vertical,
.@{menu-prefix-cls}-inline {
border-right: 0px;
.@{menu-prefix-cls}-item {
border-right: 0px solid transparent;
margin-left: 0px;
left: 0px;
}
.@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-active {
border-right: 0px;
}
}
}