test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

menu item group

Browse Source
This commit is contained in:
baiyaaaaa 2016-08-23 10:00:13 +08:00
parent c927dfb1da
commit 03f34f7d32
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": [
"./packages/menu-item/index.js"
],
"menu-item-group": [
"./packages/menu-item-group/index.js"
],
"input": [
"./packages/input/index.js"
],

93
examples/docs/menu.md
View File

@ -133,7 +133,7 @@
```html
<div class="nav">
<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="2">我的工作台</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
@ -196,19 +196,23 @@
<div class="nav nav-vertical">
<h1>Element</h1>
<el-menu mode="vertical" default-active="2-1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<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 title="分组一">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<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>
</div>
</div>
@ -217,19 +221,23 @@
<div class="nav nav-vertical">
<h1>Element</h1>
<el-menu mode="vertical" default-active="2-1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<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 title="分组一">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<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>
</div>
```
@ -237,13 +245,18 @@
<div class="demo-box" style="width: 200px;">
<div class="nav nav-vertical nav-dark">
<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-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item-group title="分组1">
<el-menu-item index="2-1">选项1</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 index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
@ -270,13 +283,18 @@
```html
<div class="nav nav-vertical nav-dark">
<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-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item-group title="分组1">
<el-menu-item index="2-1">选项1</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 index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
@ -322,3 +340,8 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| 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>
<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>
<i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
</div>

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

@ -378,4 +378,16 @@
--steps-border-color: var(--disabled-border-base);
--steps-border-radius: 4px;
--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;
}

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

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