mirror of https://github.com/ElemeFE/element
update menu docs
baiyaaaaa
parent
5abde26e21
commit
578a2c0b82
|
|
@ -1,88 +1,30 @@
|
||||||
<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;
|
|
||||||
}
|
}
|
||||||
|
.tac {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&.is-unread:after {
|
.el-menu-vertical-demo {
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 8px;
|
text-align: left;
|
||||||
height: 8px;
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
right: -4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #ff4949;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-input {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.el-input__inner {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
border-color: #d3dce6;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: #20a0ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dark {
|
|
||||||
background-color: #324057;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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>
|
||||||
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
||||||
|
### 顶栏
|
||||||
|
|
||||||
|
适用广泛的基础用法。
|
||||||
|
|
||||||
|
::: demo
|
||||||
```html
|
```html
|
||||||
<div class="nav">
|
<el-menu theme="dark" default-active="1" class="el-menu-demo" @select="handleselect">
|
||||||
<h1>Element</h1>
|
|
||||||
<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>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
<div class="nav-right">
|
<div class="line"></div>
|
||||||
<el-input placeholder="搜索用户手机号" icon="search" :value="search"></el-input>
|
<el-menu default-active="1" class="el-menu-demo" @select="handleselect">
|
||||||
<span class="nav__button is-unread">
|
<el-menu-item index="1">处理中心</el-menu-item>
|
||||||
<i class="el-icon-message"></i>
|
<el-menu-item index="2">我的工作台</el-menu-item>
|
||||||
</span>
|
<el-menu-item index="3">订单管理</el-menu-item>
|
||||||
<span class="nav__button">
|
</el-menu>
|
||||||
<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-row class="tac">
|
||||||
<h1>Element</h1>
|
<el-col :span="8">
|
||||||
<el-menu theme="dark" default-active="1">
|
<h5>带 icon</h5>
|
||||||
<el-menu-item index="1">处理中心</el-menu-item>
|
<el-menu mode="vertical" default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
|
||||||
<el-menu-item index="2">我的工作台</el-menu-item>
|
<el-submenu index="1">
|
||||||
<el-menu-item index="3">订单管理</el-menu-item>
|
<template slot="title"><i class="el-icon-message"></i>导航一</template>
|
||||||
|
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||||
|
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||||
|
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||||
|
</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>
|
</el-menu>
|
||||||
<div class="nav-right">
|
</el-col>
|
||||||
<el-input placeholder="搜索用户手机号" icon="search" :value="search2"></el-input>
|
<el-col :span="8">
|
||||||
<span class="nav__button is-unread">
|
<h5>不带 icon</h5>
|
||||||
<i class="el-icon-message"></i>
|
<el-menu mode="vertical" default-active="2" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose">
|
||||||
</span>
|
<el-submenu index="1">
|
||||||
<span class="nav__button">
|
<template slot="title">导航一</template>
|
||||||
<i class="el-icon-setting"></i>
|
<el-menu-item index="1-1">选项1</el-menu-item>
|
||||||
</span>
|
<el-menu-item index="1-2">选项2</el-menu-item>
|
||||||
</div>
|
<el-menu-item index="1-3">选项3</el-menu-item>
|
||||||
</div>
|
</el-submenu>
|
||||||
```
|
<el-menu-item index="2">导航二</el-menu-item>
|
||||||
|
<el-menu-item index="3">导航三</el-menu-item>
|
||||||
## 侧边栏导航
|
</el-menu>
|
||||||
|
</el-col>
|
||||||
<div class="demo-box" style="width: 200px;">
|
<el-col :span="8">
|
||||||
<div class="nav nav-vertical">
|
<h5>分组</h5>
|
||||||
<h1>Element</h1>
|
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
|
||||||
<el-menu mode="vertical" default-active="2-1">
|
|
||||||
<el-menu-item-group title="分组一">
|
<el-menu-item-group title="分组一">
|
||||||
<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="sub1">
|
<el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
|
||||||
<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>
|
||||||
<el-menu-item-group title="分组二">
|
<el-menu-item-group title="分组二">
|
||||||
<el-submenu index="sub2">
|
<el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
|
||||||
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
|
<el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
|
||||||
<el-menu-item index="3-1">选项1</el-menu-item>
|
<!-- <el-submenu index="5">
|
||||||
<el-menu-item index="3-2">选项2</el-menu-item>
|
<template slot="title">导航五</template>
|
||||||
<el-menu-item index="3-3">选项3</el-menu-item>
|
|
||||||
</el-submenu>
|
|
||||||
</el-menu-item-group>
|
|
||||||
</el-menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="nav nav-vertical">
|
|
||||||
<h1>Element</h1>
|
|
||||||
<el-menu mode="vertical" default-active="2-1">
|
|
||||||
<el-menu-item-group title="分组一">
|
<el-menu-item-group title="分组一">
|
||||||
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
|
<el-menu-item index="5-1">选项1</el-menu-item>
|
||||||
<el-submenu index="sub1">
|
<el-menu-item index="5-2">选项2</el-menu-item>
|
||||||
<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>
|
||||||
<el-menu-item-group title="分组二">
|
<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 index="sub3">
|
|
||||||
<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-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-menu-item index="5-3">选项3</el-menu-item>
|
||||||
</el-submenu>
|
|
||||||
</el-menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<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>
|
||||||
<el-menu-item-group title="分组2">
|
</el-submenu> -->
|
||||||
<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-menu-item-group>
|
||||||
</el-submenu>
|
|
||||||
<el-submenu index="sub3">
|
|
||||||
<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-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>
|
</el-menu>
|
||||||
</div>
|
</el-col>
|
||||||
|
</el-row>
|
||||||
```
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
## 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) | | |
|
|
||||||
| close | SubMenu 收起的回调 | function(key, keyPath) | | |
|
|
||||||
|
|
||||||
## submenu API
|
### Menu Events
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
|---------- |-------- |---------- |
|
||||||
|
| 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 | — | — |
|
||||||
|
|
|
||||||
|
|
@ -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)",
|
||||||
|
|
|
||||||
|
|
@ -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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@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 @@
|
||||||
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 @@
|
||||||
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue