mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
feat(menu): collapse done!
This commit is contained in:
07akioni
parent
aa10676404
commit
1c3f087e6f
@ -4,7 +4,7 @@ exports.alias = {
|
||||
main: path.resolve(__dirname, '../src'),
|
||||
packages: path.resolve(__dirname, '../packages'),
|
||||
examples: path.resolve(__dirname, '../examples'),
|
||||
'naive-ui/lib': path.resolve(__dirname, '../lib')
|
||||
'naive-ui/lib/icons': path.resolve(__dirname, '../packages/icons')
|
||||
}
|
||||
|
||||
exports.docLoaders = [
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Collapsed
|
||||
# Collapsed Menu
|
||||
Use collapsable vertical menu with layout sider. Use `collapsed` to control collapse status of menu. You must set `collapsed-width` to make it collapse in a right manner. There are still some other collapse related props you can modify: `icon-size`, `collapsed-icon-size`, `overlay-width`, `overlay-max-width`. For details see API table at the bottom of the page.
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout>
|
||||
@ -14,72 +15,65 @@
|
||||
<n-menu
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="24"
|
||||
:collapsed-icon-size="22"
|
||||
v-model="activeMenuItemName"
|
||||
>
|
||||
<n-menu-item title="1800" name="1800">
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="1900" name="1900">
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="2000" name="2000">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="2001" name="2001">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="2002" name="2002"></n-menu-item>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-submenu title="2003" name="2003">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="2004" name="2004">
|
||||
<n-menu-item title="2005" name="2005"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
<n-submenu title="2006" name="2006">
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="2007" name="2007">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="2008" name="2008">
|
||||
<n-menu-item title="2009" name="2009"></n-menu-item>
|
||||
<n-menu-item title="2010" name="2010"></n-menu-item>
|
||||
</n-submenu>
|
||||
<n-menu-item title="2011" name="2011">
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
</n-layout-sider>
|
||||
@ -91,11 +85,15 @@
|
||||
</n-layout>
|
||||
```
|
||||
```js
|
||||
import mdContacts from 'naive-ui/lib/icons/md-contacts'
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdContacts
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -1,76 +1,95 @@
|
||||
# DefaultOpenNames
|
||||
# Opened Submenu
|
||||
You can set `default-open-names` to make menu work in an uncontrolled manner or use `open-names` and `@open-names-change` to make it work in a controlled manner.
|
||||
```html
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:defaultOpenNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
>
|
||||
v-model="activeName"
|
||||
:default-open-names="defaultOpenNames"
|
||||
@open-names-change="handleOpenNamesChange"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: ['subMenu', "subMenu2","subMenu22"],
|
||||
opens: ['subMenu'],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
children: [
|
||||
{
|
||||
title:'group1',
|
||||
name: 'sub1',
|
||||
group: true,
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'group2',
|
||||
name: 'sub1',
|
||||
group: true,
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
defaultOpenNames: ['dance-dance-dance', 'food'],
|
||||
activeName: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
handleSelect (value) {
|
||||
this.$NMessage.info('Select: ' + JSON.stringify(value))
|
||||
},
|
||||
changeOpen (val) {
|
||||
console.log('changeOpen', val)
|
||||
this.opens = val
|
||||
handleOpenNamesChange (value) {
|
||||
this.$NMessage.info('OpenNamesChange: ' + JSON.stringify(value))
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
}
|
||||
```
|
||||
@ -1,94 +0,0 @@
|
||||
# Disabled
|
||||
```html
|
||||
<div>
|
||||
Slot:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:defaultOpenNames="initOpenKeys"
|
||||
@openNamesChange="changeOpen"
|
||||
@select="changeSelect"
|
||||
>
|
||||
<template v-slot:drawer-header-icon>
|
||||
<div style="overflow:hidden">1111</div>
|
||||
</template>
|
||||
<n-menu-item title="num1" name="num1"></n-menu-item>
|
||||
<n-menu-item title="num2" name="num2"></n-menu-item>
|
||||
<n-menu-item title="num3" name="num3"></n-menu-item>
|
||||
<n-submenu title="subMenu" name="subMenu" disabled>
|
||||
<n-menu-item title="sub1" name="sub1"></n-menu-item>
|
||||
</n-submenu>
|
||||
<n-submenu title="subMenu2" name="subMenu2">
|
||||
<n-submenu title="subMenu22" name="subMenu22">
|
||||
<n-menu-item title="sub222" name="sub222" disabled></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
<n-submenu title="subMenu3" name="subMenu3">
|
||||
<n-menu-item-group title="group">
|
||||
<n-menu-item title="sub1" name="sub6"></n-menu-item>
|
||||
<n-menu-item title="sub1" name="sub7"></n-menu-item>
|
||||
</n-menu-item-group>
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
Items:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:openNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
initOpenKeys: [],
|
||||
opens: [],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
children: [
|
||||
{
|
||||
title:'sub1',
|
||||
group: true,
|
||||
name: 'sub1',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeOpen (names) {
|
||||
this.opens = names
|
||||
console.log('names', names)
|
||||
},
|
||||
changeSelect (name) {
|
||||
this.selected = name
|
||||
console.log('changeSelect', val)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
||||
85
demo/documentation/components/menu/enUS/horizontal.md
Normal file
85
demo/documentation/components/menu/enUS/horizontal.md
Normal file
@ -0,0 +1,85 @@
|
||||
# Horizontal
|
||||
A horiziontal menu.
|
||||
```html
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
mode="horizontal"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: null,
|
||||
collapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,64 +0,0 @@
|
||||
# Icon
|
||||
```html
|
||||
<n-menu>
|
||||
<n-menu-item title="num1" name="num1">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="num2" name="num2">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="num3" name="num3">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="subMenu" name="subMenu">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="sub1" name="sub1"></n-menu-item>
|
||||
</n-submenu>
|
||||
<n-submenu title="subMenu2" name="subMenu2">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="subMenu22" name="subMenu22">
|
||||
<n-menu-item title="sub222" name="sub222"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
<n-submenu title="subMenu3" name="subMenu3">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="group" name="group">
|
||||
<n-menu-item title="sub1" name="sub6"></n-menu-item>
|
||||
<n-menu-item title="sub1" name="sub7"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import iosAirplane from 'naive-ui/lib/icons/ios-airplane'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
iosAirplane
|
||||
}
|
||||
}
|
||||
```
|
||||
85
demo/documentation/components/menu/enUS/indent.md
Normal file
85
demo/documentation/components/menu/enUS/indent.md
Normal file
@ -0,0 +1,85 @@
|
||||
# Indent
|
||||
You can specify `indent` & `root-indent` of the menu. `root-indent` only determines the first-leveled children.
|
||||
```html
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
:root-indent="36"
|
||||
:indent="12"
|
||||
>
|
||||
<n-menu-item title="Hear the Wind Sing" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Pinball, 1973" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Rat" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="A Wild Sheep Chase" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="Dance Dance Dance" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="Characters">
|
||||
<n-menu-item title="Narrator" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="Sheep Man" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="Beverage" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="Whisky" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="Food" name="food">
|
||||
<n-menu-item title="Sandwich" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="The past increases. The future recedes." name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,12 +1,88 @@
|
||||
# Menu
|
||||
<!--single-column-->
|
||||
No Food.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
items
|
||||
disabled
|
||||
openNames
|
||||
horizontal
|
||||
defaultOpenNames
|
||||
icon
|
||||
indent
|
||||
collapse
|
||||
```
|
||||
```
|
||||
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|select|
|
||||
|
||||
## Props
|
||||
### Menu Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|collapsed|`boolean`|`false`|The collapsed status of menu, only works when menu is vertical.|
|
||||
|collapsed-width|`number`|`null`|The menu width after collapsed.|
|
||||
|icon-size|`number`|`20`|The icon size when menu is not collapsed.|
|
||||
|collapsed-icon-size|`number`|`null`|The icon size when menu is collapsed. If not set, menu will use `icon-size` in place of it.|
|
||||
|overlay-width|`number`|`null`|The width of submenu popover. Works when menu is horizontal or collapsed.|
|
||||
|overlay-min-width|`number`|`180`|The min width of submenu popover. Works when menu is horizontal or collapsed.|
|
||||
|root-indent|`number`|`null`|The indent of menu's first level children. If not set, menu will use `indent` in place of it.|
|
||||
|indent|`number`|`32`|The indend of menu|
|
||||
|default-open-names|`Array<string>`|`[]`|The default expanded submenu names of menu in uncontrolled manner.|
|
||||
|openNames|`Array<string>`|`undefined`|The expanded submenu names. If set, menu will work in controlled manner and `default-open-names` won't work.|
|
||||
|value|`string`|`null`|The selected name of menu.|
|
||||
|mode|`'vertical' \| 'horizontal'`|`'vertical'`||
|
||||
|
||||
### Menu Item Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||The indentifier of the menu item. **required**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Submenu Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||The indentifier of the submenu. **required**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Menu Item Group Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|
||||
## Slots
|
||||
### Menu Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
### Menu Item Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|extra|`()`|Meta info near title|
|
||||
|icon|`()`||
|
||||
|
||||
### Submenu Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|header-extra|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
### Menu Item Group Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|
||||
## Events
|
||||
### Menu Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|select|`(selectedName: string)`||
|
||||
|open-names-change|`(openNames: Array<string>)`||
|
||||
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
# OpenNames
|
||||
```html
|
||||
Menu1:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:openNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
/>
|
||||
Menu2:
|
||||
<n-menu
|
||||
v-model="selected"
|
||||
:openNames="opens"
|
||||
:items="items"
|
||||
@select="changeSelect"
|
||||
@openNamesChange="changeOpen"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selected: 'sub1',
|
||||
opens: ['subMenu'],
|
||||
items: [
|
||||
{
|
||||
title: 'menu1',
|
||||
name: 'menu1',
|
||||
},
|
||||
{
|
||||
title: 'subMenu',
|
||||
name: 'subMenu',
|
||||
children: [
|
||||
{
|
||||
group: true,
|
||||
title:'sub1',
|
||||
name: 'sub1',
|
||||
children: [
|
||||
{
|
||||
title: 'subsub001',
|
||||
name: 'subsub001'
|
||||
},
|
||||
{
|
||||
title: 'subsub002',
|
||||
name: 'subsub002'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSelect (val) {
|
||||
console.log('changeSelect', val)
|
||||
},
|
||||
changeOpen (val) {
|
||||
console.log('changeOpen', val)
|
||||
this.opens = val
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
|
||||
```
|
||||
105
demo/documentation/components/menu/zhCN/collapse.md
Normal file
105
demo/documentation/components/menu/zhCN/collapse.md
Normal file
@ -0,0 +1,105 @@
|
||||
# 压缩菜单
|
||||
可以让垂直菜单随着边栏压缩。使用 `collapsed` 属性控制菜单状态。必需设定 `collapsed-width` 来确保菜单正常显示。除此之外还有一些其他和压缩有关的属性：`icon-size`、`collapsed-icon-size`、`overlay-width`、`overlay-max-width`。详细信息参考页面底下的 API 文档。
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
:collapsed-width="64"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-menu
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="22"
|
||||
v-model="activeMenuItemName"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeMenuItemName: null,
|
||||
collapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
95
demo/documentation/components/menu/zhCN/defaultOpenNames.md
Normal file
95
demo/documentation/components/menu/zhCN/defaultOpenNames.md
Normal file
@ -0,0 +1,95 @@
|
||||
# 展开子菜单
|
||||
你可以设定 `default-open-names` 让菜单工作在非受控状态下或者使用 `open-names` 和 `@open-names-change` 以受控的方式控制菜单。
|
||||
```html
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
:default-open-names="defaultOpenNames"
|
||||
@open-names-change="handleOpenNamesChange"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
defaultOpenNames: ['dance-dance-dance', 'food'],
|
||||
activeName: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect (value) {
|
||||
this.$NMessage.info('Select: ' + JSON.stringify(value))
|
||||
},
|
||||
handleOpenNamesChange (value) {
|
||||
this.$NMessage.info('OpenNamesChange: ' + JSON.stringify(value))
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
85
demo/documentation/components/menu/zhCN/horizontal.md
Normal file
85
demo/documentation/components/menu/zhCN/horizontal.md
Normal file
@ -0,0 +1,85 @@
|
||||
# 水平菜单
|
||||
一个水平菜单
|
||||
```html
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
mode="horizontal"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: null,
|
||||
collapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
85
demo/documentation/components/menu/zhCN/indent.md
Normal file
85
demo/documentation/components/menu/zhCN/indent.md
Normal file
@ -0,0 +1,85 @@
|
||||
# 缩进
|
||||
你可以设定菜单的 `indent` & `root-indent`。`root-indent` 只决定第一层项目的缩进。
|
||||
```html
|
||||
<n-menu
|
||||
v-model="activeName"
|
||||
:root-indent="36"
|
||||
:indent="12"
|
||||
>
|
||||
<n-menu-item title="且听风吟" name="hear-the-wind-sing">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="1973年的弹珠玩具" name="pinball-1973" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="鼠" name="rat" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="寻羊冒险记" name="a-wild-sheep-chase" disabled>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="舞，舞，舞" name="dance-dance-dance">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<book-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item-group title="人物">
|
||||
<n-menu-item title="叙事者" name="narrator">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="羊男" name="sheep-man">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<person-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
</n-menu-item-group>
|
||||
<n-submenu title="饮品" name="beverage">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<wine-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="威士忌" name="whisky" />
|
||||
</n-submenu>
|
||||
<n-submenu title="食物" name="food">
|
||||
<n-menu-item title="三明治" name="sandwich" />
|
||||
</n-submenu>
|
||||
<n-menu-item title="过去增多，未来减少" name="the-past-increases-the-future-recedes" />
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
```
|
||||
```js
|
||||
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
||||
import personIcon from 'naive-ui/lib/icons/person-outline'
|
||||
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
bookIcon,
|
||||
personIcon,
|
||||
wineIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,2 +1,88 @@
|
||||
# 菜单 Menu
|
||||
没写完
|
||||
没有吃的。
|
||||
<!--single-column-->
|
||||
## 演示
|
||||
```demo
|
||||
horizontal
|
||||
defaultOpenNames
|
||||
indent
|
||||
collapse
|
||||
```
|
||||
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|select|
|
||||
|
||||
## Props
|
||||
### Menu Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|collapsed|`boolean`|`false`|菜单是否折叠，值在菜单为垂直时有用|
|
||||
|collapsed-width|`number`|`null`|折叠后菜单的宽度|
|
||||
|icon-size|`number`|`20`|菜单未折叠时图标的大小|
|
||||
|collapsed-icon-size|`number`|`null`|菜单折叠时图标的大小，如果为设定则使用 `icon-size` 代替|
|
||||
|overlay-width|`number`|`null`|弹出子菜单的宽度，只在菜单为水平或者折叠时生效|
|
||||
|overlay-min-width|`number`|`180`|弹出子菜单的最小宽度，只在菜单为水平或者折叠时生效|
|
||||
|root-indent|`number`|`null`|菜单第一级的缩进，如果没有设定，使用 `indent` 代替|
|
||||
|indent|`number`|`32`|菜单每级的缩进|
|
||||
|default-open-names|`Array<string>`|`[]`|在非受控状态下默认展开的子菜单标识符数组|
|
||||
|openNames|`Array<string>`|`undefined`|展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-open-names` 不会生效|
|
||||
|value|`string`|`null`|菜单当前的选中值|
|
||||
|mode|`'vertical' \| 'horizontal'`|`'vertical'`||
|
||||
|
||||
### Menu Item Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||菜单项的标识符，**必需**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Submenu Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|title-extra|`string`|`null`||
|
||||
|name|`string`||子菜单的标识符，**必需**|
|
||||
|disabled|`boolean`|||
|
||||
|
||||
### Menu Item Group Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|
||||
## Slots
|
||||
### Menu Slots
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
### Menu Item Slots
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|extra|`()`|Meta info near title|
|
||||
|icon|`()`||
|
||||
|
||||
### Submenu Slots
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|header-extra|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
### Menu Item Group Slots
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|header|`()`||
|
||||
|
||||
## Events
|
||||
### Menu Events
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|select|`(selectedName: string)`||
|
||||
|open-names-change|`(openNames: Array<string>)`||
|
||||
|
||||
|
||||
@ -34,28 +34,28 @@ const appendCounts = item => {
|
||||
}
|
||||
}
|
||||
|
||||
function renderTitle (main, meta) {
|
||||
return h => {
|
||||
return h('n-config-consumer', {
|
||||
props: {
|
||||
transparent: true
|
||||
},
|
||||
scopedSlots: {
|
||||
default: ({ styleScheme }) => {
|
||||
return h('span', {
|
||||
}, [ main, ' ', h('span', {
|
||||
style: {
|
||||
marginLeft: '6px',
|
||||
color: styleScheme.tertiaryTextColor,
|
||||
fontWeight: '400',
|
||||
transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
|
||||
}
|
||||
}, [ meta ])])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// function renderTitle (main, meta) {
|
||||
// return h => {
|
||||
// return h('n-config-consumer', {
|
||||
// props: {
|
||||
// transparent: true
|
||||
// },
|
||||
// scopedSlots: {
|
||||
// default: ({ styleScheme }) => {
|
||||
// return h('span', {
|
||||
// }, [ main, ' ', h('span', {
|
||||
// style: {
|
||||
// marginLeft: '6px',
|
||||
// color: styleScheme.tertiaryTextColor,
|
||||
// fontWeight: '400',
|
||||
// transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
|
||||
// }
|
||||
// }, [ meta ])])
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
export default function (locale, instance) {
|
||||
if (locale === 'zh-CN') {
|
||||
|
||||
@ -27,6 +27,10 @@ export default {
|
||||
}
|
||||
},
|
||||
mixins: [withapp, themeable],
|
||||
model: {
|
||||
prop: 'value',
|
||||
model: 'select'
|
||||
},
|
||||
props: {
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
@ -36,14 +40,22 @@ export default {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
collapsedIconSize: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
overlayWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
overlayMinWidth: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
rootIndent: {
|
||||
type: Number,
|
||||
default: null
|
||||
@ -52,22 +64,22 @@ export default {
|
||||
type: Number,
|
||||
default: 32
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
defaultOpenNames: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
default: () => []
|
||||
},
|
||||
openNames: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
/** private */
|
||||
insidePopover: {
|
||||
type: Boolean,
|
||||
@ -81,7 +93,7 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
transitionDisabled: true,
|
||||
internalOpenNames: this.openNames || this.defaultOpenNames || []
|
||||
internalOpenNames: this.openNames || this.defaultOpenNames
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -1,23 +1,20 @@
|
||||
<template>
|
||||
<li
|
||||
class="n-menu-item"
|
||||
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
|
||||
:class="{
|
||||
'n-menu-item--selected': selected,
|
||||
'n-menu-item--disabled': synthesizedDisabled
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template v-if="renderContentAsPopover">
|
||||
<n-tooltip
|
||||
placement="right"
|
||||
:disabled="!rootMenuCollapsed"
|
||||
:placement="menuItemPopoverPlacement"
|
||||
:disabled="rootMenuIsHorizontal || !rootMenuCollapsed"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-menu-item-content-wrapper
|
||||
<n-menu-item-content
|
||||
:selected="selected"
|
||||
:padding-left="delayedPaddingLeft"
|
||||
:max-icon-size="maxIconSize"
|
||||
:active-icon-size="activeIconSize"
|
||||
:title="title"
|
||||
:disabled="synthesizedDisabled"
|
||||
:title-extra="titleExtra"
|
||||
@click="handleClick"
|
||||
>
|
||||
@ -25,30 +22,33 @@
|
||||
<slot name="icon" />
|
||||
</template>
|
||||
<template v-slot:header-extra>
|
||||
<slot name="header-extra" />
|
||||
<slot name="extra" />
|
||||
</template>
|
||||
<slot />
|
||||
</n-menu-item-content-wrapper>
|
||||
</n-menu-item-content>
|
||||
</template>
|
||||
{{ title }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<n-menu-item-content-wrapper
|
||||
<n-menu-item-content
|
||||
v-else
|
||||
:max-icon-size="maxIconSize"
|
||||
:active-icon-size="activeIconSize"
|
||||
:padding-left="delayedPaddingLeft"
|
||||
:title="title"
|
||||
:title-extra="titleExtra"
|
||||
:disabled="synthesizedDisabled"
|
||||
:selected="selected"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<slot name="icon" />
|
||||
</template>
|
||||
<template v-slot:header-extra>
|
||||
<slot name="header-extra" />
|
||||
<slot name="header" />
|
||||
</template>
|
||||
<slot />
|
||||
</n-menu-item-content-wrapper>
|
||||
</n-menu-item-content>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@ -56,29 +56,29 @@
|
||||
import collectable from '../../../mixins/collectable'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import NMenuItemContentWrapper from './MenuItemContentWrapper'
|
||||
import NMenuItemContent from './MenuItemContent'
|
||||
import NTooltip from '../../Tooltip'
|
||||
import menuContentMixin from './menuContentMixin'
|
||||
|
||||
export default {
|
||||
name: 'NMenuItem',
|
||||
components: {
|
||||
NMenuItemContentWrapper,
|
||||
NMenuItemContent,
|
||||
NTooltip
|
||||
},
|
||||
mixins: [
|
||||
collectable('NSubmenu', 'menuItemNames', 'name', true, function (injection) {
|
||||
return this.NMenu !== injection.NMenu
|
||||
collectable('PenetratedNSubmenu', 'menuItemNames', 'name', true, function (injectedNSubmenu) {
|
||||
const injectedNMenu = this.NMenu
|
||||
if (injectedNMenu !== injectedNSubmenu.NMenu) {
|
||||
if (injectedNSubmenu.rootMenuIsHorizontal) return false
|
||||
return true
|
||||
}
|
||||
}),
|
||||
withapp,
|
||||
themeable,
|
||||
menuContentMixin
|
||||
],
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [ String, Function ],
|
||||
default: null
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
computed: {
|
||||
synthesizedDisabled () {
|
||||
if (this.disabled !== undefined) return this.disabled
|
||||
return this.NSubmenu && this.NSubmenu.synthesizedDisabled
|
||||
return this.PenetratedNSubmenu && this.PenetratedNSubmenu.synthesizedDisabled
|
||||
},
|
||||
selected () {
|
||||
if (this.rootMenuValue === this.name) {
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-submenu-item"
|
||||
:style="{ paddingLeft: paddingLeft + 'px' }"
|
||||
class="n-menu-item-content"
|
||||
:style="{ paddingLeft: paddingLeft && (paddingLeft + 'px') }"
|
||||
:class="{
|
||||
'n-submenu-item--collapsed': collapsed,
|
||||
'n-submenu-item--active': !collapsed,
|
||||
'n-submenu-item--disabled': disabled
|
||||
'n-menu-item-content--collapsed': collapsed,
|
||||
'n-menu-item-content--child-selected': childSelected,
|
||||
'n-menu-item-content--selected': selected,
|
||||
'n-menu-item-content--disabled': disabled,
|
||||
'n-menu-item-content--hover': hover
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-submenu-item__icon"
|
||||
class="n-menu-item-content__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
@ -20,12 +22,17 @@
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-submenu-item__header">
|
||||
<div class="n-menu-item-content-header">
|
||||
<slot name="header">
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
<slot name="header-extra">
|
||||
<span class="n-menu-item-content-header__extra">
|
||||
<render v-if="titleExtra" :render="titleExtra" />
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="showArrow" class="n-submenu-item__arrow" />
|
||||
<div v-if="showArrow" class="n-menu-item-content__arrow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -33,7 +40,7 @@
|
||||
import render from '../../../utils/render'
|
||||
|
||||
export default {
|
||||
name: 'NSubmenuItem',
|
||||
name: 'NMenuItemContent',
|
||||
components: {
|
||||
render
|
||||
},
|
||||
@ -62,9 +69,25 @@ export default {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
titleExtra: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
childSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="n-menu-item-wrapper">
|
||||
<div
|
||||
v-if="$slots.icon"
|
||||
class="n-menu-item-wrapper__icon"
|
||||
:style="{
|
||||
width: maxIconSize && (maxIconSize + 'px'),
|
||||
height: maxIconSize && (maxIconSize + 'px'),
|
||||
fontSize: activeIconSize && (activeIconSize + 'px'),
|
||||
}"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<div class="n-menu-item-header">
|
||||
<slot>
|
||||
<render :render="title" />
|
||||
</slot>
|
||||
<slot name="header-extra">
|
||||
<span class="n-menu-item-header__extra">
|
||||
<render v-if="titleExtra" :render="titleExtra" />
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import render from '../../../utils/render'
|
||||
|
||||
export default {
|
||||
name: 'NMenuItemContentWrapper',
|
||||
components: {
|
||||
render
|
||||
},
|
||||
props: {
|
||||
maxIconSize: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
activeIconSize: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
titleExtra: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<li class="n-menu-item-group">
|
||||
<span class="n-menu-item-group-title" :style="{ paddingLeft: paddingLeft + 'px' }">
|
||||
<span class="n-menu-item-group-title" :style="{ paddingLeft: delayedPaddingLeft && delayedPaddingLeft + 'px' }">
|
||||
<slot name="header"><render :render="title" /></slot>
|
||||
</span>
|
||||
<div>
|
||||
|
||||
@ -1,30 +1,36 @@
|
||||
<template>
|
||||
<li
|
||||
class="n-submenu"
|
||||
:class="{
|
||||
'n-submenu--selected-inside': selectedInside
|
||||
}"
|
||||
>
|
||||
<template v-if="renderContentAsPopover">
|
||||
<n-popover
|
||||
trigger="hover"
|
||||
placement="right-start"
|
||||
:placement="submenuPopoverPlacement"
|
||||
:show-arrow="false"
|
||||
:disabled="!rootMenuCollapsed"
|
||||
:controller="popoverController"
|
||||
:disabled="(!rootMenuIsHorizontal && !rootMenuCollapsed) || synthesizedDisabled"
|
||||
:directive="rootMenuIsHorizontal ? 'show' : 'if'"
|
||||
:overlay-style="{
|
||||
width: overlayWidth === null ? null : overlayMinWidth + 'px',
|
||||
minWidth: overlayMinWidth + 'px',
|
||||
paddingTop: '8px',
|
||||
paddingBottom: '8px'
|
||||
}"
|
||||
@show="handlePopMenuShow"
|
||||
@hide="handlePopMenuHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-submenu-item
|
||||
<n-menu-item-content
|
||||
:padding-left="delayedPaddingLeft"
|
||||
:collapsed="synthesizedCollapsed"
|
||||
:disabled="disabled"
|
||||
:max-icon-size="maxIconSize"
|
||||
:active-icon-size="activeIconSize"
|
||||
:title="title"
|
||||
:show-arrow="true"
|
||||
:title-extra="titleExtra"
|
||||
:hover="hover"
|
||||
:show-arrow="!rootMenuIsHorizontal"
|
||||
:child-selected="selectedInside"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
@ -33,12 +39,12 @@
|
||||
<template v-slot:header>
|
||||
<slot name="header" />
|
||||
</template>
|
||||
</n-submenu-item>
|
||||
<template v-slot:header-extra>
|
||||
<slot name="header-extra" />
|
||||
</template>
|
||||
</n-menu-item-content>
|
||||
</template>
|
||||
<n-menu
|
||||
:style="{
|
||||
width: '272px'
|
||||
}"
|
||||
:root-indent="24"
|
||||
:indent="24"
|
||||
:inside-popover="true"
|
||||
@ -49,7 +55,7 @@
|
||||
<slot />
|
||||
</n-menu>
|
||||
</n-popover>
|
||||
<fade-in-height-expand-transition>
|
||||
<fade-in-height-expand-transition v-if="!rootMenuIsHorizontal">
|
||||
<ul
|
||||
v-show="!synthesizedCollapsed"
|
||||
class="n-submenu-content"
|
||||
@ -59,14 +65,16 @@
|
||||
</fade-in-height-expand-transition>
|
||||
</template>
|
||||
<template v-else>
|
||||
<n-submenu-item
|
||||
<n-menu-item-content
|
||||
:padding-left="delayedPaddingLeft"
|
||||
:collapsed="synthesizedCollapsed"
|
||||
:disabled="disabled"
|
||||
:max-icon-size="maxIconSize"
|
||||
:active-icon-size="activeIconSize"
|
||||
:title="title"
|
||||
:title-extra="titleExtra"
|
||||
:show-arrow="!rootMenuInsidePopover"
|
||||
:child-selected="selectedInside"
|
||||
@click="handleClick"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
@ -75,7 +83,10 @@
|
||||
<template v-slot:header>
|
||||
<slot name="header" />
|
||||
</template>
|
||||
</n-submenu-item>
|
||||
<template v-slot:header-extra>
|
||||
<slot name="header-extra" />
|
||||
</template>
|
||||
</n-menu-item-content>
|
||||
<fade-in-height-expand-transition>
|
||||
<ul
|
||||
v-show="!synthesizedCollapsed"
|
||||
@ -91,25 +102,25 @@
|
||||
<script>
|
||||
import FadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
|
||||
import NPopover from '../../../common/Popover'
|
||||
import NSubmenuItem from './SubmenuItem'
|
||||
import NMenuItemContent from './MenuItemContent'
|
||||
import NMenu from './Menu'
|
||||
import menuContentMixin from './menuContentMixin'
|
||||
|
||||
export default {
|
||||
name: 'NSubmenu',
|
||||
components: {
|
||||
NSubmenuItem,
|
||||
NMenuItemContent,
|
||||
FadeInHeightExpandTransition,
|
||||
NPopover,
|
||||
NMenu
|
||||
},
|
||||
mixins: [menuContentMixin],
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
title: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
titleExtra: {
|
||||
type: [String, Function],
|
||||
default: null
|
||||
},
|
||||
@ -125,10 +136,18 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
delayedPaddingLeft: null,
|
||||
menuItemNames: []
|
||||
menuItemNames: [],
|
||||
hover: false,
|
||||
popoverController: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
overlayWidth () {
|
||||
return this.NMenu.overlayWidth
|
||||
},
|
||||
overlayMinWidth () {
|
||||
return this.NMenu.overlayMinWidth
|
||||
},
|
||||
selectedInside () {
|
||||
return this.menuItemNames.includes(this.NMenu.value)
|
||||
},
|
||||
@ -136,7 +155,8 @@ export default {
|
||||
return this.rootMenuCollapsed && this.atRoot
|
||||
},
|
||||
synthesizedDisabled () {
|
||||
if (this.disabled !== undefined) return this.undefined
|
||||
if (this.disabled !== undefined) return this.disabled
|
||||
if (this.PenetratedNSubmenu) return this.PenetratedNSubmenu.synthesizedDisabled
|
||||
return this.NMenu && this.NMenu.disabled
|
||||
},
|
||||
collapsedAccrodingToOpenNames () {
|
||||
@ -158,6 +178,7 @@ export default {
|
||||
provide () {
|
||||
return {
|
||||
NSubmenu: this,
|
||||
PenetratedNSubmenu: this,
|
||||
NMenuItemGroup: null
|
||||
}
|
||||
},
|
||||
@ -173,6 +194,13 @@ export default {
|
||||
},
|
||||
handlePopMenuSelect (value) {
|
||||
this.NMenu.handleSelect(value)
|
||||
this.popoverController.hide()
|
||||
},
|
||||
handlePopMenuHide () {
|
||||
this.hover = false
|
||||
},
|
||||
handlePopMenuShow () {
|
||||
this.hover = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,9 @@ export default {
|
||||
},
|
||||
NMenuItemGroup: {
|
||||
default: null
|
||||
},
|
||||
PenetratedNSubmenu: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -21,11 +24,29 @@ export default {
|
||||
return this.atRoot && !this.rootMenuInsidePopover
|
||||
},
|
||||
rootMenuCollapsed () {
|
||||
return this.NMenu.collapsed
|
||||
return !this.rootMenuIsHorizontal && this.NMenu.collapsed
|
||||
},
|
||||
rootMenuValue () {
|
||||
return this.NMenu.value
|
||||
},
|
||||
rootMenuMode () {
|
||||
return this.NMenu.mode
|
||||
},
|
||||
rootMenuIsHorizontal () {
|
||||
return this.rootMenuMode === 'horizontal'
|
||||
},
|
||||
menuItemPopoverPlacement () {
|
||||
if (this.rootMenuMode === 'horizontal') {
|
||||
return 'bottom'
|
||||
}
|
||||
return 'right'
|
||||
},
|
||||
submenuPopoverPlacement () {
|
||||
if (this.rootMenuMode === 'horizontal') {
|
||||
return 'bottom'
|
||||
}
|
||||
return 'right-start'
|
||||
},
|
||||
maxIconSize () {
|
||||
return Math.max(this.collapsedIconSize, this.iconSize)
|
||||
},
|
||||
@ -44,9 +65,10 @@ export default {
|
||||
return this.NMenu && this.NMenu.iconSize
|
||||
},
|
||||
collapsedIconSize () {
|
||||
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
|
||||
return this.NMenu.collapsedIconSize === null ? this.NMenu.iconSize : this.NMenu.collapsedIconSize
|
||||
},
|
||||
paddingLeft () {
|
||||
if (this.rootMenuIsHorizontal) return null
|
||||
if (this.atRoot && this.NMenu.collapsedWidth !== null && this.NMenu.collapsed) {
|
||||
return this.NMenu.collapsedWidth / 2 - this.iconSize / 2
|
||||
}
|
||||
@ -55,7 +77,7 @@ export default {
|
||||
} else if (this.NSubmenu) {
|
||||
return this.NMenu.indent + this.NSubmenu.paddingLeft
|
||||
} else {
|
||||
return this.NMenu.rootIndent || this.NMenu.indent
|
||||
return this.NMenu.rootIndent === null ? this.NMenu.indent : this.NMenu.rootIndent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,6 +78,10 @@ export default {
|
||||
detached: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
directive: {
|
||||
type: String,
|
||||
default: 'if'
|
||||
}
|
||||
},
|
||||
mixins: [withapp, themeable, asthemecontext, placeable, zindexable],
|
||||
@ -102,6 +106,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
active (value) {
|
||||
console.log('popover content active change', value)
|
||||
if (value) {
|
||||
this.$parent.transferElement()
|
||||
this.$emit('show')
|
||||
@ -227,6 +232,23 @@ export default {
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
const vShow = this.directive === 'show'
|
||||
const directives = [
|
||||
{
|
||||
name: 'clickoutside',
|
||||
value: this.handleClickOutside
|
||||
},
|
||||
{
|
||||
name: 'mousemoveoutside',
|
||||
value: this.handleMouseMoveOutside
|
||||
}
|
||||
]
|
||||
if (vShow) {
|
||||
directives.push({
|
||||
name: 'show',
|
||||
value: this.active
|
||||
})
|
||||
}
|
||||
return h('div', {
|
||||
staticClass: 'n-positioning-container',
|
||||
class: {
|
||||
@ -252,7 +274,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}, [
|
||||
this.active ? h('div', {
|
||||
(vShow || this.active) ? h('div', {
|
||||
attrs: {
|
||||
'n-placement': this.adjustedPlacement
|
||||
},
|
||||
@ -265,16 +287,7 @@ export default {
|
||||
'n-popover-content--fix-width': this.width !== null || this.maxWidth !== null
|
||||
},
|
||||
style: this.style,
|
||||
directives: [
|
||||
{
|
||||
name: 'clickoutside',
|
||||
value: this.handleClickOutside
|
||||
},
|
||||
{
|
||||
name: 'mousemoveoutside',
|
||||
value: this.handleMouseMoveOutside
|
||||
}
|
||||
],
|
||||
directives,
|
||||
on: {
|
||||
mouseenter: this.handleMouseEnter,
|
||||
mouseleave: this.handleMouseLeave
|
||||
|
||||
@ -96,6 +96,10 @@ export default {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
directive: {
|
||||
type: String,
|
||||
default: 'if'
|
||||
}
|
||||
},
|
||||
render (h, context) {
|
||||
|
||||
319
styles/Menu.scss
319
styles/Menu.scss
@ -12,46 +12,55 @@
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
@include m(transition-disabled) {
|
||||
@include b(menu-item) {
|
||||
@include b(menu-item-wrapper) {
|
||||
@include e(icon) {
|
||||
@include b(menu-item-content) {
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
transition: none !important;
|
||||
}
|
||||
@include b(menu-item-header) {
|
||||
}
|
||||
@include b(menu-item-content-header) {
|
||||
transition: none !important;
|
||||
@include e(extra) {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(submenu-item) {
|
||||
@include e(icon) {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
@include m(horizontal) {
|
||||
@include b(menu-list) {
|
||||
display: flex;
|
||||
@include b(menu-item-content) {
|
||||
padding: 0 20px;
|
||||
border-bottom: 2px solid transparent;
|
||||
@include m(selected, child-selected) {
|
||||
background-color: transparent;
|
||||
border-bottom: 2px solid $--primary-6;
|
||||
}
|
||||
@include e(header){
|
||||
transition: none !important;
|
||||
@include not-m(disabled) {
|
||||
&:hover {
|
||||
border-bottom: 2px solid $--primary-6;
|
||||
}
|
||||
@include m(hover) {
|
||||
border-bottom: 2px solid $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(collapsed) {
|
||||
@include b(menu-list) {
|
||||
@include b(menu-item) {
|
||||
@include b(menu-item-wrapper) {
|
||||
@include b(menu-item-header) {
|
||||
opacity: 0;
|
||||
@include b(menu-item-content) {
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $--n-text-color;
|
||||
stroke: $--n-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(submenu) {
|
||||
@include b(submenu-item) {
|
||||
@include e(icon) {
|
||||
fill: $--n-text-color;
|
||||
}
|
||||
@include e(header) {
|
||||
@include b(menu-item-content-header) {
|
||||
opacity: 0;
|
||||
}
|
||||
@include e(arrow) {
|
||||
transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -63,154 +72,27 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@include b(menu-item) {
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier;
|
||||
position: relative;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
line-height: 1.5;
|
||||
@include b(menu-item-wrapper) {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include e(icon) {
|
||||
transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
|
||||
box-sizing: content-box;
|
||||
flex-shrink: 0;
|
||||
padding-right: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@include b(menu-item-header) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
opacity: 1;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@include b(menu-item-wrapper) {
|
||||
@include e(icon) {
|
||||
fill: $--n-secondary-text-color;
|
||||
}
|
||||
@include b(menu-item-header) {
|
||||
color: $--n-secondary-text-color;
|
||||
@include e(extra) {
|
||||
@include once {
|
||||
white-space: nowrap;
|
||||
margin-left: 6px;
|
||||
display: inline-block;
|
||||
transition: color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
color: $--n-meta-text-color;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include e(icon) {
|
||||
fill: $--primary-6;
|
||||
}
|
||||
@include b(menu-item-header) {
|
||||
color: $--primary-6;
|
||||
@include e(extra) {
|
||||
color: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(selected) {
|
||||
background-color: $--menu-item-background-color;
|
||||
@include b(menu-item-wrapper) {
|
||||
@include e(icon) {
|
||||
fill: $--primary-6;
|
||||
}
|
||||
@include b(menu-item-header) {
|
||||
color: $--primary-6;
|
||||
@include e(extra) {
|
||||
color: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(submenu) {
|
||||
@include once {
|
||||
@include b(menu-item-content) {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.5;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@include b(submenu-content) {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@include fade-in-height-expand-transition($duration: .2s);
|
||||
}
|
||||
}
|
||||
@include m(selected-inside) {
|
||||
& > {
|
||||
@include b(submenu-item) {
|
||||
@include e(header) {
|
||||
color: $--primary-6
|
||||
}
|
||||
@include e(icon) {
|
||||
fill: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(submenu-item) {
|
||||
@include e(header) {
|
||||
color: $--n-text-color;
|
||||
}
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
@include e(icon) {
|
||||
fill: $--n-text-color;
|
||||
}
|
||||
@include once {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
|
||||
box-sizing: content-box;
|
||||
flex-shrink: 0;
|
||||
padding-right: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
@include e(icon) {
|
||||
transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier;
|
||||
padding-right: 8px;
|
||||
box-sizing: content-box;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@include e(header) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
opacity: 1;
|
||||
flex-grow: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
@include m(collapsed) {
|
||||
@include e(arrow) {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include e(icon) {
|
||||
fill: $--primary-6;
|
||||
}
|
||||
@include e(header) {
|
||||
color: $--primary-6;
|
||||
justify-content: center;
|
||||
@include b(icon) {
|
||||
fill: $--n-secondary-text-color;
|
||||
stroke: $--n-secondary-text-color;
|
||||
}
|
||||
}
|
||||
@include e(arrow) {
|
||||
@ -229,6 +111,107 @@
|
||||
transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier .1s, border-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
}
|
||||
@include b(menu-item-content-header) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
|
||||
opacity: 1;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
color: $--n-secondary-text-color;
|
||||
white-space: nowrap;
|
||||
@include e(extra) {
|
||||
@include once {
|
||||
white-space: nowrap;
|
||||
margin-left: 6px;
|
||||
display: inline-block;
|
||||
transition: color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
color: $--n-meta-text-color;
|
||||
}
|
||||
}
|
||||
@include m(collapsed) {
|
||||
@include e(arrow) {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
}
|
||||
@include not-m(disabled) {
|
||||
&:hover {
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $--primary-6;
|
||||
stroke: $--primary-6;
|
||||
}
|
||||
}
|
||||
@include b(menu-item-content-header) {
|
||||
color: $--primary-6;
|
||||
@include e(extra) {
|
||||
color: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(hover) {
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $--primary-6;
|
||||
stroke: $--primary-6;
|
||||
}
|
||||
}
|
||||
@include b(menu-item-content-header) {
|
||||
color: $--primary-6;
|
||||
@include e(extra) {
|
||||
color: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(selected) {
|
||||
background-color: $--menu-item-background-color;
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $--primary-6;
|
||||
stroke: $--primary-6;
|
||||
}
|
||||
}
|
||||
@include b(menu-item-content-header) {
|
||||
color: $--primary-6;
|
||||
@include e(extra) {
|
||||
color: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@include m(child-selected) {
|
||||
@include b(menu-item-content-header) {
|
||||
color: $--primary-6;
|
||||
@include e(extra) {
|
||||
color: $--primary-6;
|
||||
}
|
||||
}
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $--primary-6;
|
||||
stroke: $--primary-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(menu-item) {
|
||||
@include once {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(submenu) {
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@include b(submenu-content) {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@include fade-in-height-expand-transition($duration: .2s);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(menu-item-group) {
|
||||
@ -239,7 +222,7 @@
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
transition: padding-left .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user