Skip to content

E
Element
Commit 578a2c0b authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

update menu docs

parent 5abde26e
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 290 deletions
examples/docs/menu.md
View file @ 578a2c0b
<style> <style>
.demo-box .nav { .demo-box.demo-menu {
background-color: #eff2f7; .el-menu-demo {
line-height: 60px; padding-left: 55px;
@utils-clearfix;
h1 {
font-size: 20px;
color: #1f2f3d;
float: left;
margin: 0 25px 0 20px;
} }
> .el-menu { .el-menu-vertical-demo {
float: left; width: 200px;
height: 400px;
} }
&-right { .line {
float: right; height: 1px;
padding-right: 20px; background-color: #e0e6ed;
margin: 35px -24px;
} }
.nav__button { h5 {
font-size: 24px; font-size: 14px;
vertical-align: middle;
margin-left: 20px;
cursor: pointer;
display: inline-block;
position: relative;
color: #8492a6; color: #8492a6;
margin-top: 10px;
i {
vertical-align: middle;
display: block;
}
&.is-unread:after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
position: absolute;
top: -2px;
right: -4px;
border-radius: 50%;
background-color: #ff4949;
}
} }
.el-input { .tac {
display: inline-block; text-align: center;
}
.el-input__inner {
background-color: #e5e9f2;
border-color: #d3dce6;
&:focus {
border-color: #20a0ff;
}
}
&.nav-dark {
background-color: #324057;
h1 { .el-menu-vertical-demo {
color: #fff; display: inline-block;
} text-align: left;
.nav__button {
color: #fff;
}
.el-input__inner {
background-color: #1f2d3d;
border-color: #1f2d3d;
color: #fff;
&:focus {
border-color: #1f2d3d;
}
} }
} }
} }
.demo-box .nav-vertical {
h1 {
float: none;
}
.el-menu--vertical {
float: none;
}
}
</style> </style>
<script> <script>
...@@ -108,240 +50,118 @@ ...@@ -108,240 +50,118 @@
} }
</script> </script>
## 基础用法 ## NavMenu 导航菜单
<div class="demo-box"> 为网站提供导航功能的菜单
<div class="nav">
<h1>Element</h1>
<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>
</el-menu>
<div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
<span class="nav__button is-unread">
<i class="el-icon-message"></i>
</span>
<span class="nav__button">
<i class="el-icon-setting"></i>
</span>
</div>
</div>
</div>
```html ### 顶栏
<div class="nav">
<h1>Element</h1>
<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>
</el-menu>
<div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
<span class="nav__button is-unread">
<i class="el-icon-message"></i>
</span>
<span class="nav__button">
<i class="el-icon-setting"></i>
</span>
</div>
</div>
```
<div class="demo-box"> 适用广泛的基础用法。
<div class="nav nav-dark">
<h1>Element</h1>
<el-menu theme="dark" default-active="1">
<el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
<div class="nav-right">
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
<span class="nav__button is-unread">
<i class="el-icon-message"></i>
</span>
<span class="nav__button">
<i class="el-icon-setting"></i>
</span>
</div>
</div>
</div>
::: demo
```html ```html
<div class="nav nav-dark"> <el-menu theme="dark" default-active="1" class="el-menu-demo" @select="handleselect">
<h1>Element</h1> <el-menu-item index="1">处理中心</el-menu-item>
<el-menu theme="dark" default-active="1"> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item index="1">处理中心</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
<el-menu-item index="2">我的工作台</el-menu-item> </el-menu>
<el-menu-item index="3">订单管理</el-menu-item> <div class="line"></div>
</el-menu> <el-menu default-active="1" class="el-menu-demo" @select="handleselect">
<div class="nav-right"> <el-menu-item index="1">处理中心</el-menu-item>
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input> <el-menu-item index="2">我的工作台</el-menu-item>
<span class="nav__button is-unread"> <el-menu-item index="3">订单管理</el-menu-item>
<i class="el-icon-message"></i> </el-menu>
</span>
<span class="nav__button">
<i class="el-icon-setting"></i>
</span>
</div>
</div>
``` ```
:::
## 侧边栏导航 ### 侧栏
<div class="demo-box" style="width: 200px;"> 垂直菜单，可内嵌子菜单。
<div class="nav nav-vertical">
<h1>Element</h1>
<el-menu mode="vertical" default-active="2-1">
<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>
::: demo
```html ```html
<div class="nav nav-vertical"> <el-row class="tac">
<h1>Element</h1> <el-col :span="8">
<el-menu mode="vertical" default-active="2-1"> <h5>带 icon</h5>
<el-menu-item-group title="分组一"> <el-menu mode="vertical" default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-submenu index="1">
<el-submenu index="sub1"> <template slot="title"><i class="el-icon-message"></i>导航一</template>
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="1-3">选项3</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 class="demo-box" style="width: 200px;">
<div class="nav nav-vertical nav-dark">
<h1>Element</h1>
<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-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>
<el-submenu index="sub3"> <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
<el-menu-item index="3-1">选项1</el-menu-item> </el-menu>
<el-menu-item index="3-2">选项2</el-menu-item> </el-col>
<el-menu-item index="3-3">选项3</el-menu-item> <el-col :span="8">
</el-submenu> <h5>不带 icon</h5>
<el-submenu index="sub4"> <el-menu mode="vertical" default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
<template slot="title"><i class="el-icon-setting"></i>导航四</template> <el-submenu index="1">
<el-menu-item index="4-1">选项1</el-menu-item> <template slot="title">导航一</template>
<el-menu-item index="4-2">选项2</el-menu-item> <el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="4-3">选项3</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu> <el-menu-item index="1-3">选项3</el-menu-item>
<el-submenu index="sub5">
<template slot="title"><i class="el-icon-setting"></i>导航五</template>
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
<el-menu-item index="5-3">选项3</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-menu>
</div> </el-col>
</div> <el-col :span="8">
<h5>分组</h5>
```html <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
<div class="nav nav-vertical nav-dark"> <el-menu-item-group title="分组一">
<h1>Element</h1> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<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="2"><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">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<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>
<el-menu-item-group title="分组2"> <el-menu-item-group title="分组二">
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item> <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
<!-- <el-submenu index="5">
<template slot="title">导航五</template>
<el-menu-item-group title="分组一">
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-menu-item index="5-3">选项3</el-menu-item>
</el-menu-item-group>
</el-submenu> -->
</el-menu-item-group> </el-menu-item-group>
</el-submenu> </el-menu>
<el-submenu index="sub3"> </el-col>
<template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-row>
<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-submenu index="sub4">
<template slot="title"><i class="el-icon-setting"></i>导航四</template>
<el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item index="4-2">选项2</el-menu-item>
<el-menu-item index="4-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="sub5">
<template slot="title"><i class="el-icon-setting"></i>导航五</template>
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
<el-menu-item index="5-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</div>
``` ```
:::
## menu API ### Menu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal,vertical | horizontal | | mode | 模式 | string | horizontal,vertical | horizontal |
| theme | 主题色 | string | light,dark | light | | theme | 主题色 | string | light,dark | light |
| activeKey | 当前激活菜单的 key | string | | | | default-active | 当前激活菜单的 key | string | — | — |
| openedKeys | 当前打开的submenu的 key 数组 | Array | | | | default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
| uniqueOpend | 是否只保持一个子菜单的展开 | boolean | true, false | false | | unique-opend | 是否只保持一个子菜单的展开 | boolean | — | false |
| router | 是否使用 vue-router 的模式，启用该模式会在 select 事件触发时执行 this.$route.$router.go(key) 进行路由跳转 | boolean | true, false | false | | router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 key 作为 path 进行路由跳转 | boolean | — | false |
| select | 菜单激活回调 | function(key, keyPath) | | |
| open | SubMenu 展开的回调 | function(key, keyPath) | | | ### Menu Events
| close | SubMenu 收起的回调 | function(key, keyPath) | | | | 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
## submenu API | select | 菜单激活回调 | key: 选中菜单项的 keyPath: 选中菜单项的 key path |
| open | SubMenu 展开的回调 | key: 打开的 subMenu 的 key， keyPath: 打开的 subMenu 的 key path |
| close | SubMenu 收起的回调 | key: 收起的 subMenu 的 key， keyPath: 收起的 subMenu 的 key path |
### SubMenu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| key | 唯一标志 | string | | | | key | 唯一标志 | string | — | — |
## menu-item API ### Menu-Item Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| key | 唯一标志 | string | | | | key | 唯一标志 | string | — | — |
## menu-group API ### Menu-Group Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| title | 分组标题 | string | | | | title | 分组标题 | string | — | — |
examples/nav.config.json
View file @ 578a2c0b
...@@ -199,6 +199,12 @@ ...@@ -199,6 +199,12 @@
{ {
"groupName": "Nav", "groupName": "Nav",
"list": [ "list": [
{
"path": "/menu",
"name": "导航菜单 (menu)",
"title": "NavMenu 导航菜单",
"description": "富展现的标签页"
},
{ {
"path": "/tabs", "path": "/tabs",
"name": "标签页 (tabs)", "name": "标签页 (tabs)",
......
packages/theme-default/src/menu.css
View file @ 578a2c0b
...@@ -4,11 +4,14 @@ ...@@ -4,11 +4,14 @@
@component-namespace el { @component-namespace el {
@b menu { @b menu {
height: 60px; height: 60px;
border-radius: 2px;
line-height: 60px; line-height: 60px;
list-style: none; list-style: none;
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
background-color: #fff;
background-color: var(--menu-item-fill);
& li { & li {
list-style: none; list-style: none;
...@@ -38,6 +41,8 @@ ...@@ -38,6 +41,8 @@
} }
} }
@m dark { @m dark {
background-color: var(--dark-menu-item-fill);
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
color: #c0ccda; color: #c0ccda;
...@@ -81,8 +86,7 @@ ...@@ -81,8 +86,7 @@
color: var(--menu-item-color); color: var(--menu-item-color);
float: left; float: left;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 20px;
margin: 0 10px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
...@@ -133,14 +137,14 @@ ...@@ -133,14 +137,14 @@
margin: 0; margin: 0;
top: 50%; top: 50%;
right: 20px; right: 20px;
transform: rotateZ(180deg) translateY(-50%); margin-top: -8px;
transform: rotateZ(180deg);
font-size: 12px; font-size: 12px;
transition: transform .3s ease-in-out; transition: transform .3s;
transform-origin: center 0;
} }
@when opened { @when opened {
& .el-submenu__icon-arrow { & .el-submenu__icon-arrow {
transform: translateY(-50%); transform: rotateZ(0);
} }
} }
} }
......
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