github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #93 from eleme/feat/menu 

menu item group
pull/2/head
FuryBean 2016-08-23 13:41:41 +08:00 committed by GitHub
parent c927dfb1da 03f34f7d32
commit 127db97b87
7 changed files with 174 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.json
View File

@ -26,6 +26,9 @@
"menu-item": [ "menu-item": [
"./packages/menu-item/index.js" "./packages/menu-item/index.js"
], ],
"menu-item-group": [
"./packages/menu-item-group/index.js"
],
"input": [ "input": [
"./packages/input/index.js" "./packages/input/index.js"
], ],

93
examples/docs/menu.md
View File

@ -133,7 +133,7 @@
```html ```html
<div class="nav"> <div class="nav">
<h1>Element</h1> <h1>Element</h1>
<el-menu default-active="1"> <el-menu default-active="2">
<el-menu-item index="1">处理中心</el-menu-item> <el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item index="2">我的工作台</el-menu-item> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
@ -196,19 +196,23 @@
<div class="nav nav-vertical"> <div class="nav nav-vertical">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" default-active="2-1"> <el-menu mode="vertical" default-active="2-1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item-group title="分组一">
<el-submenu index="sub1"> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-submenu index="sub1">
<el-menu-item index="2-1">选项1</el-menu-item> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu> <el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="sub2"> </el-submenu>
<template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-menu-item-group>
<el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item-group title="分组二">
<el-menu-item index="3-2">选项2</el-menu-item> <el-submenu index="sub2">
<el-menu-item index="3-3">选项3</el-menu-item> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
</el-submenu> <el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
</el-menu> </el-menu>
</div> </div>
</div> </div>
@ -217,19 +221,23 @@
<div class="nav nav-vertical"> <div class="nav nav-vertical">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" default-active="2-1"> <el-menu mode="vertical" default-active="2-1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item-group title="分组一">
<el-submenu index="sub1"> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-submenu index="sub1">
<el-menu-item index="2-1">选项1</el-menu-item> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu> <el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="sub2"> </el-submenu>
<template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-menu-item-group>
<el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item-group title="分组二">
<el-menu-item index="3-2">选项2</el-menu-item> <el-submenu index="sub2">
<el-menu-item index="3-3">选项3</el-menu-item> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
</el-submenu> <el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
</el-menu> </el-menu>
</div> </div>
``` ```
@ -237,13 +245,18 @@
<div class="demo-box" style="width: 200px;"> <div class="demo-box" style="width: 200px;">
<div class="nav nav-vertical nav-dark"> <div class="nav nav-vertical nav-dark">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect"> <el-menu mode="vertical" theme="dark" :default-openeds="['sub2']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item-group title="分组1">
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu> </el-submenu>
<el-submenu index="sub3"> <el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
@ -270,13 +283,18 @@
```html ```html
<div class="nav nav-vertical nav-dark"> <div class="nav nav-vertical nav-dark">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect"> <el-menu mode="vertical" theme="dark" :default-openeds="['sub2']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item-group title="分组1">
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu> </el-submenu>
<el-submenu index="sub3"> <el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
@ -322,3 +340,8 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| key | 唯一标志 | string | | | | key | 唯一标志 | string | | |
## menu-group API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 分组标题 | string | | |

7
packages/menu-item-group/index.js Normal file
View File

@ -0,0 +1,7 @@
const ElMenuItemGroup = require('../menu/src/menu-item-group');
ElMenuItemGroup.install = function(Vue) {
Vue.component(ElMenuItemGroup.name, ElMenuItemGroup);
};
module.exports = ElMenuItemGroup;

52
packages/menu/src/menu-item-group.vue Normal file
View File

@ -0,0 +1,52 @@
<script>
module.exports = {
name: 'el-menu-item-group',
componentName: 'menu-item-group',
props: {
title: {
type: String,
required: true
}
},
data() {
return {
paddingLeft: 15
};
},
computed: {
activeIndex() {
return this.$parent.activeIndex;
}
},
methods: {
initPadding() {
var parent = this.$parent;
var level = 0;
var componentTag = parent.$options._componentTag;
while (componentTag !== 'el-menu') {
if (componentTag === 'el-submenu') {
level++;
}
parent = parent.$parent;
componentTag = parent.$options._componentTag;
}
this.paddingLeft += level * 10;
}
},
mounted() {
this.initPadding();
}
};
</script>
<template>
<li class="el-menu-item-group">
<div class="el-menu-item-group__title" :style="{'padding-left': paddingLeft + 'px'}">{{title}}</div>
<ul>
<slot></slot>
</ul>
</li>
</template>

2
packages/menu/src/submenu.vue
View File

@ -55,7 +55,7 @@
<template> <template>
<li class="el-submenu" :class="{'is-opened': opened}"> <li class="el-submenu" :class="{'is-opened': opened}">
<div class="el-submenu__title" @click="handleClick"> <div class="el-menu-item el-submenu__title" @click="handleClick">
<slot name="title"></slot> <slot name="title"></slot>
<i class="el-submenu__icon-arrow el-icon-arrow-up"></i> <i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
</div> </div>

12
packages/theme-default/src/common/var.css
View File

@ -378,4 +378,16 @@
--steps-border-color: var(--disabled-border-base); --steps-border-color: var(--disabled-border-base);
--steps-border-radius: 4px; --steps-border-radius: 4px;
--steps-padding: 20px; --steps-padding: 20px;
/*Steps
--------------------------*/
--menu-item-color: #475669;
--menu-item-fill: #eff2f7;
--menu-item-hover-fill: #d3dce6;
--submenu-item-fill: #e5e9f2;
--dark-menu-item-color: #475669;
--dark-menu-item-fill: #324057;
--dark-menu-item-hover-fill: #475669;
--dark-submenu-item-fill: #1f2d3d;
} }

71
packages/theme-default/src/menu.css
View File

@ -5,11 +5,14 @@
@b menu { @b menu {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
background-color: #eff2f7;
list-style: none; list-style: none;
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
& li {
list-style: none;
}
@m vertical { @m vertical {
height: auto; height: auto;
@ -22,10 +25,9 @@
padding-left: 20px; padding-left: 20px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
color: #475669;
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--menu-item-hover-fill);
} }
& .el-menu-item__bar { & .el-menu-item__bar {
display: none; display: none;
@ -36,18 +38,20 @@
} }
} }
@m dark { @m dark {
background-color: #324057;
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
color: #c0ccda; color: #c0ccda;
} }
& .el-menu-item {
background-color: var(--dark-menu-item-fill);
}
&.el-menu--vertical { &.el-menu--vertical {
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
&:hover { &:hover {
background-color: #475669; background-color: var(--dark-menu-item-hover-fill);
} }
&.is-active { &.is-active {
background-color: #5e6d82; background-color: #5e6d82;
@ -55,13 +59,15 @@
} }
} }
} }
& .el-submenu .el-menu {
& .el-submenu .el-menu-item { background-color: var(--dark-submenu-item-fill);
background-color: #1f2d3d; }
& .el-submenu .el-menu-item:not(.el-submenu__title) {
background-color: transparent;
color: #99a9bf; color: #99a9bf;
&:hover { &:hover {
background-color: #475669; background-color: var(--dark-menu-item-hover-fill);
} }
&.is-active { &.is-active {
background-color: #5e6d82; background-color: #5e6d82;
@ -71,8 +77,8 @@
} }
} }
@b menu-item { @b menu-item {
font-size: 16px; font-size: 14px;
color: #475669; color: var(--menu-item-color);
float: left; float: left;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
@ -81,6 +87,7 @@
position: relative; position: relative;
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: center center; transform-origin: center center;
background-color: var(--menu-item-fill);
@e bar { @e bar {
content: ''; content: '';
@ -107,29 +114,20 @@
@b submenu { @b submenu {
& .el-menu { & .el-menu {
height: auto; height: auto;
background-color: darken(#eff2f7, 5%); background-color: var(--submenu-item-fill);
} }
& .el-menu-item { & .el-menu-item:not(.el-submenu__title) {
padding-left: 46px; padding-left: 46px;
} background-color: transparent;
@e title {
float: none;
height: 56px;
line-height: 56px;
margin: 0;
padding-left: 20px;
cursor: pointer;
position: relative;
color: #475669;
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--menu-item-hover-fill);
}
& [class^="el-icon-"] {
vertical-align: baseline;
margin-right: 10px;
} }
} }
@e title [class^="el-icon-"] {
vertical-align: baseline;
margin-right: 10px;
}
@e icon-arrow { @e icon-arrow {
position: absolute; position: absolute;
margin: 0; margin: 0;
@ -146,4 +144,17 @@
} }
} }
} }
@b menu-item-group {
> ul {
padding: 0;
}
@e title {
padding-top: 15px;
line-height: normal;
font-size: 14px;
padding-left: 25px;
color: #99a9bf;
}
}
} }