mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): collapsed-icon-size

Browse Source
This commit is contained in:
07akioni 2020-01-15 13:41:21 +08:00
parent 72331e28a0
commit 7c1560f10e
8 changed files with 122 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
demo/documentation/components/layout/enUS/collapse.md
View File

@ -20,32 +20,37 @@ Use `collapsed-width` and `width` to set sider's width.
@collapse="collapsed = true"
@expand="collapsed = false"
>
<n-menu :collapsed="collapsed" :collapsed-width="48" v-model="activeMenuItemName">
<n-menu
:collapsed="collapsed"
:collapsed-width="48"
:collapsed-icon-size="24"
v-model="activeMenuItemName"
>
<n-menu-item title="1800" name="1800">
<template v-slot:icon>
<n-icon>
<md-notifications-outline />
<md-contacts />
</n-icon>
</template>
</n-menu-item>
<n-menu-item title="1900" name="1900">
<template v-slot:icon>
<n-icon>
<md-notifications-outline />
<md-contacts />
</n-icon>
</template>
</n-menu-item>
<n-menu-item title="2000" name="2000">
<template v-slot:icon>
<n-icon>
<md-notifications-outline />
<md-contacts />
</n-icon>
</template>
</n-menu-item>
<n-sub-menu title="2001" name="2001">
<template v-slot:icon>
<n-icon>
<md-notifications-outline />
<md-contacts />
</n-icon>
</template>
<n-menu-item title="2002" name="2002"></n-menu-item>
@ -53,7 +58,7 @@ Use `collapsed-width` and `width` to set sider's width.
<n-sub-menu title="2003" name="2003">
<template v-slot:icon>
<n-icon>
<md-notifications-outline />
<md-contacts />
</n-icon>
</template>
<n-sub-menu title="2004" name="2004">
@ -63,7 +68,7 @@ Use `collapsed-width` and `width` to set sider's width.
<n-sub-menu title="2006" name="2006">
<template v-slot:icon>
<n-icon>
<md-notifications-outline />
<md-contacts />
</n-icon>
</template>
<n-sub-menu title="2007" name="2007">
@ -110,11 +115,11 @@ Use `collapsed-width` and `width` to set sider's width.
```
```js
import mdNotificationsOutline from 'naive-ui/lib/icons/md-notifications-outline'
import mdContacts from 'naive-ui/lib/icons/md-contacts'
export default {
components: {
mdNotificationsOutline
mdContacts
},
data () {
return {

4
packages/common/Menu/src/Menu.vue
View File

@ -34,6 +34,10 @@ export default {
type: Number,
default: null
},
collapsedIconSize: {
type: Number,
default: undefined
},
value: {
type: String,
default: null

26
packages/common/Menu/src/MenuItem.vue
View File

@ -1,5 +1,5 @@
<template>
<li v-if="!shouldBeRenderedAsDropdownItem & isFirstLevel" class="n-menu-item-wrapper">
<li v-if="!shouldBeRenderedAsDropdownItem && isFirstLevel" class="n-menu-item-wrapper">
<n-tooltip trigger="hover" :disabled="!NMenu.collapsed" placement="right" :delay="300">
<template v-slot:activator>
<div
@ -15,9 +15,9 @@
v-if="$slots.icon"
class="n-menu-item__icon"
:style="{
width: iconSize && (iconSize + 'px'),
height: iconSize && (iconSize + 'px'),
fontSize: iconSize && (iconSize + 'px'),
width: maxIconSize && (maxIconSize + 'px'),
height: maxIconSize && (maxIconSize + 'px'),
fontSize: activeIconSize && (activeIconSize + 'px'),
}"
>
<slot name="icon" />
@ -129,8 +129,24 @@ export default {
if (this.NMenuUl) return false
return !this.isFirstLevel && this.NMenu.collapsed
},
useCollapsedIconSize () {
return this.NMenu.collapsed && this.isFirstLevel
},
maxIconSize () {
return Math.max(this.collapsedIconSize, this.iconSize)
},
activeIconSize () {
if (this.useCollapsedIconSize) {
return this.collapsedIconSize
} else {
return this.iconSize
}
},
collapsedIconSize () {
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
},
iconSize () {
return this.NMenu && this.NMenu.iconSize
return this.NMenu.iconSize
},
isFirstLevel () {
return !this.NSubMenu && !this.NMenuItemGroup

36
packages/common/Menu/src/SubMenu.vue
View File

@ -18,7 +18,7 @@
trigger="click"
:focusable="false"
:disabled="!isFirstLevel || !NMenu.collapsed"
placement="right"
placement="right-start"
type="menu"
@select="handleDropdownSelect"
>
@ -27,8 +27,8 @@
class="n-sub-menu-item n-dropdown"
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
:class="{
'n-sub-menu-item--collapsed': isCollapsed,
'n-sub-menu-item--active': !isCollapsed,
'n-sub-menu-item--collapsed': contentCollapsed,
'n-sub-menu-item--active': !contentCollapsed,
'n-sub-menu-item--disabled': disabled,
}"
@click="handleClick"
@ -37,9 +37,9 @@
v-if="$slots.icon"
class="n-sub-menu-item__icon"
:style="{
width: iconSize && (iconSize + 'px'),
height: iconSize && (iconSize + 'px'),
fontSize: iconSize && (iconSize + 'px'),
width: maxIconSize && (maxIconSize + 'px'),
height: maxIconSize && (maxIconSize + 'px'),
fontSize: activeIconSize && (activeIconSize + 'px'),
}"
>
<slot name="icon" />
@ -58,8 +58,8 @@
class="n-sub-menu-item n-dropdown"
:style="{paddingLeft: delayedPaddingLeft + 'px'}"
:class="{
'n-sub-menu-item--collapsed': isCollapsed,
'n-sub-menu-item--active': !isCollapsed,
'n-sub-menu-item--collapsed': contentCollapsed,
'n-sub-menu-item--active': !contentCollapsed,
'n-sub-menu-item--disabled': disabled,
}"
@click="handleClick"
@ -83,7 +83,7 @@
</div>
<fade-in-height-expand-transition>
<n-menu-ul
v-show="!isCollapsed"
v-show="!contentCollapsed"
class="n-sub-menu-content"
>
<slot />
@ -166,9 +166,25 @@ export default {
shouldBeRenderedAsDropdownSubmenu () {
return this.NMenu.collapsed && !this.isFirstLevel
},
useCollapsedIconSize () {
return this.NMenu.collapsed && this.isFirstLevel
},
maxIconSize () {
return Math.max(this.collapsedIconSize, this.iconSize)
},
activeIconSize () {
if (this.useCollapsedIconSize) {
return this.collapsedIconSize
} else {
return this.iconSize
}
},
iconSize () {
return this.NMenu && this.NMenu.iconSize
},
collapsedIconSize () {
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
},
isFirstLevel () {
return !this.NSubMenu && !this.NMenuItemGroup
},
@ -187,7 +203,7 @@ export default {
return this.NMenu.rootIndent || this.NMenu.indent
}
},
isCollapsed () {
contentCollapsed () {
return this.NMenu.collapsed || !(this.NMenu.synthesizedOpenNames.includes(this.name))
}
},

4
packages/common/Menu/src/menu.vue
View File

@ -34,6 +34,10 @@ export default {
type: Number,
default: null
},
collapsedIconSize: {
type: Number,
default: undefined
},
value: {
type: String,
default: null

26
packages/common/Menu/src/menuItem.vue
View File

@ -1,5 +1,5 @@
<template>
<li v-if="!shouldBeRenderedAsDropdownItem & isFirstLevel" class="n-menu-item-wrapper">
<li v-if="!shouldBeRenderedAsDropdownItem && isFirstLevel" class="n-menu-item-wrapper">
<n-tooltip trigger="hover" :disabled="!NMenu.collapsed" placement="right" :delay="300">
<template v-slot:activator>
<div
@ -15,9 +15,9 @@
v-if="$slots.icon"
class="n-menu-item__icon"
:style="{
width: iconSize && (iconSize + 'px'),
height: iconSize && (iconSize + 'px'),
fontSize: iconSize && (iconSize + 'px'),
width: maxIconSize && (maxIconSize + 'px'),
height: maxIconSize && (maxIconSize + 'px'),
fontSize: activeIconSize && (activeIconSize + 'px'),
}"
>
<slot name="icon" />
@ -129,8 +129,24 @@ export default {
if (this.NMenuUl) return false
return !this.isFirstLevel && this.NMenu.collapsed
},
useCollapsedIconSize () {
return this.NMenu.collapsed && this.isFirstLevel
},
maxIconSize () {
return Math.max(this.collapsedIconSize, this.iconSize)
},
activeIconSize () {
if (this.useCollapsedIconSize) {
return this.collapsedIconSize
} else {
return this.iconSize
}
},
collapsedIconSize () {
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
},
iconSize () {
return this.NMenu && this.NMenu.iconSize
return this.NMenu.iconSize
},
isFirstLevel () {
return !this.NSubMenu && !this.NMenuItemGroup

36
packages/common/Menu/src/subMenu.vue
View File

@ -18,7 +18,7 @@
trigger="click"
:focusable="false"
:disabled="!isFirstLevel || !NMenu.collapsed"
placement="right"
placement="right-start"
type="menu"
@select="handleDropdownSelect"
>
@ -27,8 +27,8 @@
class="n-sub-menu-item n-dropdown"
:style="{ paddingLeft: delayedPaddingLeft + 'px' }"
:class="{
'n-sub-menu-item--collapsed': isCollapsed,
'n-sub-menu-item--active': !isCollapsed,
'n-sub-menu-item--collapsed': contentCollapsed,
'n-sub-menu-item--active': !contentCollapsed,
'n-sub-menu-item--disabled': disabled,
}"
@click="handleClick"
@ -37,9 +37,9 @@
v-if="$slots.icon"
class="n-sub-menu-item__icon"
:style="{
width: iconSize && (iconSize + 'px'),
height: iconSize && (iconSize + 'px'),
fontSize: iconSize && (iconSize + 'px'),
width: maxIconSize && (maxIconSize + 'px'),
height: maxIconSize && (maxIconSize + 'px'),
fontSize: activeIconSize && (activeIconSize + 'px'),
}"
>
<slot name="icon" />
@ -58,8 +58,8 @@
class="n-sub-menu-item n-dropdown"
:style="{paddingLeft: delayedPaddingLeft + 'px'}"
:class="{
'n-sub-menu-item--collapsed': isCollapsed,
'n-sub-menu-item--active': !isCollapsed,
'n-sub-menu-item--collapsed': contentCollapsed,
'n-sub-menu-item--active': !contentCollapsed,
'n-sub-menu-item--disabled': disabled,
}"
@click="handleClick"
@ -83,7 +83,7 @@
</div>
<fade-in-height-expand-transition>
<n-menu-ul
v-show="!isCollapsed"
v-show="!contentCollapsed"
class="n-sub-menu-content"
>
<slot />
@ -166,9 +166,25 @@ export default {
shouldBeRenderedAsDropdownSubmenu () {
return this.NMenu.collapsed && !this.isFirstLevel
},
useCollapsedIconSize () {
return this.NMenu.collapsed && this.isFirstLevel
},
maxIconSize () {
return Math.max(this.collapsedIconSize, this.iconSize)
},
activeIconSize () {
if (this.useCollapsedIconSize) {
return this.collapsedIconSize
} else {
return this.iconSize
}
},
iconSize () {
return this.NMenu && this.NMenu.iconSize
},
collapsedIconSize () {
return this.NMenu.collapsedIconSize || this.NMenu.iconSize
},
isFirstLevel () {
return !this.NSubMenu && !this.NMenuItemGroup
},
@ -187,7 +203,7 @@ export default {
return this.NMenu.rootIndent || this.NMenu.indent
}
},
isCollapsed () {
contentCollapsed () {
return this.NMenu.collapsed || !(this.NMenu.synthesizedOpenNames.includes(this.name))
}
},

8
styles/Menu.scss
View File

@ -68,11 +68,13 @@
list-style: none;
line-height: 1.5;
@include e(icon) {
transition: padding-right .3s $--n-ease-in-out-cubic-bezier;
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 e(header) {
transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
@ -169,11 +171,13 @@
align-items: center;
position: relative;
@include e(icon) {
transition: padding-right .3s $--n-ease-in-out-cubic-bezier;
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;