Skip to content

E
Element
Commit 27dcb4e4 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

Menu: add chalk theme

parent b04ad87d
Hide whitespace changes
Inline Side-by-side
Showing with 315 additions and 185 deletions
examples/docs/en-US/menu.md
View file @ 27dcb4e4
......@@ -4,7 +4,7 @@
padding-left: 55px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
width: 240px;
min-height: 400px;
}
.line {
......@@ -59,9 +59,9 @@ Menu that provides navigation for your website.
Top bar NavMenu can be used in a variety of scenarios.
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
```html
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
......@@ -72,7 +72,14 @@ Top bar NavMenu can be used in a variety of scenarios.
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
......@@ -108,11 +115,18 @@ Vertical NavMenu with sub-menus.
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
```html
<el-row class="tac">
<el-col :span="8">
<h5>With icons</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-col :span="12">
<h5>Default colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<template slot="title">
<i class="el-icon-message"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
......@@ -125,18 +139,34 @@ Vertical NavMenu with sub-menus.
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>Navigator Three</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8">
<h5>Without icons</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
<el-col :span="12">
<h5>Custom colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">Navigator One</template>
<template slot="title">
<i class="el-icon-message"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
......@@ -146,21 +176,14 @@ Vertical NavMenu with sub-menus.
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">Navigator Two</el-menu-item>
<el-menu-item index="3">Navigator Three</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8">
<h5>Groups</h5>
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
<el-menu-item-group title="Group One">
<el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
</el-menu-item-group>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>Navigator Three</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
......@@ -251,6 +274,9 @@ Vertical NavMenu could be collapsed.
|---------- |-------- |---------- |------------- |-------- |
| mode | menu display mode | string | horizontal/vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
| background-color | background color of Menu (hex format) | string | — | #ffffff |
| text-color | text color of Menu (hex format) | string | — | #2d2f33 |
| active-text-color | text color of currently active menu item (hex format) | string | — | #1989fa |
| theme | theme color | string | light/dark | light |
| default-active | index of currently active menu | string | — | — |
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
......
examples/docs/zh-CN/menu.md
View file @ 27dcb4e4
......@@ -4,7 +4,7 @@
padding-left: 55px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
width: 240px;
min-height: 400px;
}
.line {
......@@ -59,10 +59,10 @@
适用广泛的基础用法。
::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。
::: demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
```html
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
......@@ -73,7 +73,14 @@
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
......@@ -106,14 +113,21 @@
垂直菜单，可内嵌子菜单。
::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。
::: demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
```html
<el-row class="tac">
<el-col :span="8">
<h5>带 icon</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<template slot="title">
<i class="el-icon-message"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
......@@ -127,16 +141,33 @@
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8">
<h5>不带 icon</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
<el-col :span="12">
<h5>自定义颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">导航一</template>
<el-menu-item-group title="分组一">
<template slot="title">
<i class="el-icon-message"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
......@@ -148,21 +179,14 @@
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">导航二</el-menu-item>
<el-menu-item index="3">导航三</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8">
<h5>分组</h5>
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
<el-menu-item-group title="分组一">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
</el-menu-item-group>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
......@@ -251,7 +275,9 @@
|---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal,vertical | vertical |
| collapse | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean | — | false |
| theme | 主题色 | string | light,dark | light |
| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #2d2f33 |
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #1989fa |
| default-active | 当前激活菜单的 index | string | — | — |
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
......
packages/menu/src/menu-item-group.vue
View file @ 27dcb4e4
......@@ -28,7 +28,7 @@
},
computed: {
levelPadding() {
let padding = 10;
let padding = 20;
let parent = this.$parent;
if (this.rootMenu.collapse) return 20;
while (parent && parent.$options.componentName !== 'ElMenu') {
......@@ -37,7 +37,6 @@
}
parent = parent.$parent;
}
padding === 10 && (padding = 20);
return padding;
}
}
......
packages/menu/src/menu-item.vue
View file @ 27dcb4e4
<template>
<li class="el-menu-item"
:style="paddingStyle"
:style="[paddingStyle, itemStyle, { backgroundColor }]"
@click="handleClick"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
:class="{
'is-active': active,
'is-disabled': disabled
......@@ -49,9 +51,46 @@
computed: {
active() {
return this.index === this.rootMenu.activeIndex;
},
hoverBackground() {
return this.rootMenu.hoverBackground;
},
backgroundColor() {
return this.rootMenu.backgroundColor || '';
},
activeTextColor() {
return this.rootMenu.activeTextColor || '';
},
textColor() {
return this.rootMenu.textColor || '';
},
mode() {
return this.rootMenu.mode;
},
itemStyle() {
const style = {
color: this.active ? this.activeTextColor : this.textColor
};
if (this.mode === 'horizontal' && !this.isNested) {
style.borderBottomColor = this.active
? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
: 'transparent';
}
return style;
},
isNested() {
return this.parentMenu !== this.rootMenu;
}
},
methods: {
onMouseEnter() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$el.style.backgroundColor = this.hoverBackground;
},
onMouseLeave() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$el.style.backgroundColor = this.backgroundColor;
},
handleClick() {
this.dispatch('ElMenu', 'item-click', this);
this.$emit('click', this);
......
packages/menu/src/menu.vue
View file @ 27dcb4e4
......@@ -2,9 +2,9 @@
<el-menu-collapse-transition>
<ul class="el-menu"
:key="+collapse"
:style="{ backgroundColor: backgroundColor || '' }"
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
>
......@@ -102,17 +102,16 @@
default: ''
},
defaultOpeneds: Array,
theme: {
type: String,
default: 'light'
},
uniqueOpened: Boolean,
router: Boolean,
menuTrigger: {
type: String,
default: 'hover'
},
collapse: Boolean
collapse: Boolean,
backgroundColor: String,
textColor: String,
activeTextColor: String
},
data() {
return {
......@@ -122,6 +121,11 @@
submenus: {}
};
},
computed: {
hoverBackground() {
return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
}
},
watch: {
defaultActive(value) {
const item = this.items[value];
......@@ -141,6 +145,42 @@
}
},
methods: {
getColorChannels(color) {
color = color.replace('#', '');
if (/^[1-9a-fA-F]{3}$/.test(color)) {
color = color.split('');
for (let i = 2; i >= 0; i--) {
color.splice(i, 0, color[i]);
}
color = color.join('');
}
if (/^[1-9a-fA-F]{6}$/.test(color)) {
return {
red: parseInt(color.slice(0, 2), 16),
green: parseInt(color.slice(2, 4), 16),
blue: parseInt(color.slice(4, 6), 16)
};
} else {
return {
red: 255,
green: 255,
blue: 255
};
}
},
mixColor(color, percent) {
let { red, green, blue } = this.getColorChannels(color);
if (percent > 0) { // shade given color
red *= 1 - percent;
green *= 1 - percent;
blue *= 1 - percent;
} else { // tint given color
red += (255 - red) * percent;
green += (255 - green) * percent;
blue += (255 - blue) * percent;
}
return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
},
addItem(item) {
this.$set(this.items, item.index, item);
},
......
packages/menu/src/submenu.vue
View file @ 27dcb4e4
......@@ -8,23 +8,28 @@
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
>
<div class="el-submenu__title" ref="submenu-title" @click="handleClick" :style="paddingStyle">
<div
class="el-submenu__title"
ref="submenu-title"
@click="handleClick"
@mouseenter="handleTitleMouseenter"
@mouseleave="handleTitleMouseleave"
:style="[paddingStyle, titleStyle, { backgroundColor }]">
<slot name="title"></slot>
<i :class="{
'el-submenu__icon-arrow': true,
'el-icon-caret-bottom': rootMenu.mode === 'horizontal',
'el-icon-arrow-down': rootMenu.mode === 'vertical' && !rootMenu.collapse,
'el-icon-caret-right': rootMenu.mode === 'vertical' && rootMenu.collapse
'el-icon-arrow-down': rootMenu.mode === 'horizontal' || rootMenu.mode === 'vertical' && !rootMenu.collapse,
'el-icon-arrow-right': rootMenu.mode === 'vertical' && rootMenu.collapse
}">
</i>
</div>
<template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
<transition :name="menuTransitionName">
<ul class="el-menu" v-show="opened"><slot></slot></ul>
<ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
</transition>
</template>
<el-collapse-transition v-else>
<ul class="el-menu" v-show="opened"><slot></slot></ul>
<ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
</el-collapse-transition>
</li>
</template>
......@@ -63,27 +68,54 @@
opened() {
return this.rootMenu.openedMenus.indexOf(this.index) > -1;
},
active: {
cache: false,
get() {
let isActive = false;
const submenus = this.submenus;
const items = this.items;
active() {
let isActive = false;
const submenus = this.submenus;
const items = this.items;
Object.keys(items).forEach(index => {
if (items[index].active) {
isActive = true;
}
});
Object.keys(items).forEach(index => {
if (items[index].active) {
isActive = true;
}
});
Object.keys(submenus).forEach(index => {
if (submenus[index].active) {
isActive = true;
}
});
Object.keys(submenus).forEach(index => {
if (submenus[index].active) {
isActive = true;
}
});
return isActive;
return isActive;
},
hoverBackground() {
return this.rootMenu.hoverBackground;
},
backgroundColor() {
return this.rootMenu.backgroundColor || '';
},
activeTextColor() {
return this.rootMenu.activeTextColor || '';
},
textColor() {
return this.rootMenu.textColor || '';
},
mode() {
return this.rootMenu.mode;
},
titleStyle() {
if (this.mode !== 'horizontal') {
return {
color: this.textColor
};
}
return {
borderBottomColor: this.active
? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
: 'transparent',
color: this.active
? this.activeTextColor
: this.textColor
};
}
},
methods: {
......@@ -134,6 +166,14 @@
this.timeout = setTimeout(() => {
this.rootMenu.closeMenu(this.index);
}, 300);
},
handleTitleMouseenter() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.hoverBackground;
},
handleTitleMouseleave() {
if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.backgroundColor || '';
}
},
created() {
......
packages/theme-chalk/src/aside.scss
View file @ 27dcb4e4
@import "mixins/mixins";
@include b(aside) {
overflow: auto;
box-sizing: border-box;
}
packages/theme-chalk/src/common/var.scss
View file @ 27dcb4e4
......@@ -584,13 +584,9 @@ $--steps-padding: 20px;
/* Menu
--------------------------*/
$--menu-item-color: $--link-color;
$--menu-item-fill: $--color-text-placeholder;
$--menu-item-hover-fill: $--disabled-border-base;
$--dark-menu-item-color: $--link-color;
$--dark-menu-item-fill: $--color-text-secondary;
$--dark-menu-item-hover-fill: $--link-color;
$--menu-item-color: $--color-text-primary;
$--menu-item-fill: $--color-white;
$--menu-item-hover-fill: $--color-primary-light-9;
/* Rate
--------------------------*/
......
packages/theme-chalk/src/menu.scss
View file @ 27dcb4e4
......@@ -16,7 +16,7 @@
}
@include b(menu) {
border-radius: 2px;
border-right: solid 1px #e6e6e6;
list-style: none;
position: relative;
margin: 0;
......@@ -28,27 +28,9 @@
list-style: none;
}
@include m(dark) {
background-color: $--dark-menu-item-fill;
& .el-menu-item,
& .el-submenu__title {
color: $--color-black;
&:hover {
background-color: $--color-black;
}
}
& .el-submenu .el-menu {
background-color: $--color-black;
& .el-menu-item:hover {
background-color: $--color-black;
}
}
}
@include m(horizontal) {
border-right: none;
border-bottom: solid 1px #e6e6e6;
& .el-menu-item {
float: left;
height: 60px;
......@@ -57,7 +39,8 @@
cursor: pointer;
position: relative;
box-sizing: border-box;
border-bottom: 5px solid transparent;
border-bottom: 2px solid transparent;
color: $--color-text-secondary;
a,
a:hover {
......@@ -65,7 +48,7 @@
}
&:hover {
background-color: $--menu-item-hover-fill;
background-color: #fff;
}
}
& .el-submenu {
......@@ -76,18 +59,23 @@
position: absolute;
top: 65px;
left: 0;
border:1px solid $--color-black;
border: none;
padding: 5px 0;
background-color: $--color-white;
z-index: 100;
min-width: 100%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
box-shadow: $--box-shadow-light;
}
& .el-submenu__title {
height: 60px;
line-height: 60px;
border-bottom: 5px solid transparent;
border-bottom: 2px solid transparent;
color: $--color-text-secondary;
}
.el-submenu__title:hover {
background-color: #fff;
}
& .el-menu-item {
......@@ -101,40 +89,18 @@
& .el-submenu__icon-arrow {
position: static;
vertical-align: middle;
margin-left: 5px;
color: $--color-black;
margin-left: 8px;
margin-top: -3px;
}
}
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: $--menu-item-fill;
color: $--color-text-primary;
}
& > .el-menu-item:hover,
& > .el-submenu:hover .el-submenu__title,
& > .el-menu-item.is-active,
& > .el-submenu.is-active .el-submenu__title {
border-bottom: 5px solid $--color-primary;
}
&.el-menu--dark {
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: $--dark-menu-item-fill;
}
& .el-submenu {
.el-menu-item,
.el-submenu-title {
color: $--color-black;
&:hover {
background-color: $--color-black;
}
}
.el-menu-item.is-active {
color: $--color-primary;
}
}
border-bottom: 2px solid $--color-primary;
color: $--color-text-primary;
}
}
@include m(collapse) {
......@@ -160,6 +126,10 @@
}
}
> .el-menu-item.is-active i {
color: inherit;
}
.el-submenu {
position: relative;
& .el-menu {
......@@ -168,6 +138,7 @@
top: 0;
left: 100%;
z-index: 10;
box-shadow: $--box-shadow-light;
}
&.is-opened {
......@@ -196,7 +167,10 @@
margin-right: 0;
}
&:hover {
background-color: $--color-black;
background-color: $--menu-item-hover-fill;
}
i {
color: $--color-text-secondary;
}
@include when(active) {
color: $--color-primary;
......@@ -208,26 +182,26 @@
position: relative;
@include menu-item;
&:hover {
background-color: $--color-black;
}
& * {
vertical-align: middle;
}
i {
color: $--color-text-secondary;
}
&:hover {
background-color: $--menu-item-hover-fill;
}
}
& .el-menu {
background-color: $--color-black;
border: none;
}
& .el-menu-item {
height: 50px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
&:hover {
background-color: $--color-black;
}
}
@include e(icon-arrow) {
position: absolute;
......@@ -260,11 +234,10 @@
padding: 0;
}
@include e(title) {
padding-top: 15px;
padding: 7px 0 7px 20px;
line-height: normal;
font-size: 14px;
padding-left: 20px;
color: $--color-black;
font-size: 12px;
color: $--color-text-secondary;
}
}
......
test/unit/specs/menu.spec.js
View file @ 27dcb4e4
......@@ -185,7 +185,7 @@ describe('Menu', () => {
it('default opened', done => {
vm = createVue({
template: `
<el-menu theme="dark" :default-openeds="defaultOpeneds">
<el-menu :default-openeds="defaultOpeneds">
<el-menu-item index="1">default opened处理中心</el-menu-item>
<el-submenu index="2" ref="submenu1">
<template slot="title">default opened我的工作台</template>
......@@ -217,25 +217,10 @@ describe('Menu', () => {
});
});
});
it('theme', () => {
vm = createVue({
template: `
<el-menu theme="dark">
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
`,
data() {
return {
};
}
}, true);
expect(vm.$el.classList.contains('el-menu--dark')).to.be.true;
});
it('unique-opened', done => {
vm = createVue({
template: `
<el-menu theme="dark" unique-opened default-active="2-2">
<el-menu unique-opened default-active="2-2">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2" ref="submenu1">
<template slot="title">我的工作台</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment