GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'develop-0.10.0' of github.com:ant-design/ant-design into develop-0.10.0

pull/520/head
afc163 9 years ago
parent
081be0c842 8887eacecd
commit
39a3a8044b
3 changed files with 163 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      components/menu/index.jsx
  2. 1
      components/menu/index.md
  3. 187
      style/components/menu.less

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 数组 | | |

187
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,
@ -172,7 +188,7 @@
}
&:before, &:after {
position: absolute;
background-color: rgba(255, 255, 255, 0.001);
background-color: transparent;
width: 20px;
height: 50px;
content: '';
@ -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: #8c8c8c;
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: #8c8c8c;
.@{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: #FFF;
}
}
.@{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: #FFF;
}
}
& > .@{menu-prefix-cls}-item,
& > .@{menu-prefix-cls}-submenu {
border-bottom: 0px;
top: 0px;
> a , > span{
line-height: 51px;
}
> a {
color: #8c8c8c;
&:hover {
color: #FFF;
}
&:before, &:after {
background-color: transparent;
}
&: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: #8c8c8c;
}
.@{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;
}
}
}

Write Preview
Loading…
Cancel
Save