mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-12 14:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(menu): long item example

Browse Source
This commit is contained in:
07akioni 2021-04-08 16:38:19 +08:00
parent 99336d4bc6
commit a156a9aa79
12 changed files with 116 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dropdown/src/interface.ts
View File

@ -3,7 +3,7 @@ import { MenuOption, MenuGroupOption } from '../../menu/src/interface'
export type Key = string | number
// Aligned with MenuItem props, has some redundant fields
// Aligned with MenuOption props, has some redundant fields
export type DropdownOption = MenuOption
export type DropdownGroupOption = MenuGroupOption
export interface DropdownIgnoredOption {

6
src/layout/demos/enUS/collapse.demo.md
View File

@ -52,15 +52,9 @@ Use `collapsed-width` and `width` to set sider's width.
```
```js
import { MdContacts } from '@vicons/ionicons4'
export default {
components: {
MdContacts
},
data () {
return {
activeMenuItemName: null,
collapsed: true
}
}

13
src/menu/demos/enUS/index.demo-entry.md
View File

@ -12,6 +12,7 @@ select
default-expanded-names
indent
collapse
long-label
```
## Props
@ -29,14 +30,14 @@ collapse
| expanded-keys | `Array<string>` | `undefined` | The expanded submenu keys. If set, menu will work in controlled manner and `default-expanded-names` won't work. |
| icon-size | `number` | `20` | The icon size when menu is not collapsed. |
| indent | `number` | `32` | The indend of menu |
| options | `Array<MenuItem \| Submenu \| MenuItemGroup>` | `[]` | Items data of menu. |
| options | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | `[]` | Items data of menu. |
| mode | `'vertical' \| 'horizontal'` | `'vertical'` | |
| root-indent | `number` | `undefined` | The indent of menu's first level children. If not set, menu will use `indent` in place of it. |
| value | `string \| null` | `undefined` | The selected name of menu. |
| on-update:expanded-keys | `(keys: string[]) => void` | `undefined` | `keys` is the array of expanded menu options' `key`. |
| on-update:value | `(key: string, item: MenuItem) => void` | `undefined` | Callback when select a menu item. `key` is the `key` of the selected menu item. `item` is then original data of the menu item. |
| on-update:value | `(key: string, item: MenuOption) => void` | `undefined` | Callback when select a menu item. `key` is the `key` of the selected menu item. `item` is then original data of the menu item. |
### MenuItem Properties
### MenuOption Properties
| Name | Type | Description |
| --- | --- | --- |
@ -50,18 +51,18 @@ collapse
| Name | Type | Description |
| --- | --- | --- |
| children | `Array<MenuItem \| Submenu \| MenuItemGroup>` | |
| children | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | |
| disabled? | `boolean` | |
| extra? | `string \| (() => VNodeChild)` | |
| icon? | `() => VNodeChild` | |
| key | `string` | The indentifier of the submenu. |
| label | `string \| (() => VNodeChild)` | |
### MenuItemGroup Properties
### MenuOptionGroup Properties
| Name | Type | Description |
| --- | --- | --- |
| children | `Array<MenuItem \| Submenu \| MenuItemGroup>` | **required** |
| children | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | **required** |
| key | `string` | The indentifier of the menu group. |
| label | `string \| (() => VNodeChild)` | |
| type | `'group'` | **required** |

31
src/menu/demos/enUS/long-label.demo.md Normal file
View File

@ -0,0 +1,31 @@
# Long Label
Set `label` to render function that renders `n-ellpisis`.
```html
<n-menu :options="options" style="width: 180px;" default-value="1" />
```
```js
import { defineComponent, h } from 'vue'
import { NEllipsis } from 'naive-ui'
export default defineComponent({
setup () {
return {
options: [
{
label: () =>
h(NEllipsis, null, { default: () => '电灯熄灭 物换星移 泥牛入海' }),
key: '1'
},
{
label: () =>
h(NEllipsis, null, { default: () => '黑暗好像 一颗巨石 按在胸口' }),
key: '2'
}
]
}
}
})
```

51
src/menu/demos/zhCN/index.demo-entry.md
View File

@ -12,6 +12,7 @@ select
default-expanded-keys
indent
collapse
long-label
```
## Props
@ -29,39 +30,39 @@ collapse
| expanded-keys | `Array<string>` | `undefined` | 展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-expanded-keys` 不会生效 |
| icon-size | `number` | `20` | 菜单未折叠时图标的大小 |
| indent | `number` | `32` | 菜单每级的缩进 |
| options | `Array<MenuItem \| Submenu \| MenuItemGroup>` | `[]` | 菜单的数据 |
| options | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | `[]` | 菜单的数据 |
| mode | `'vertical' \| 'horizontal'` | `'vertical'` | |
| root-indent | `number` | `32` | 菜单第一级的缩进，如果没有设定，使用 `indent` 代替 |
| value | `string \| null` | `undefined` | 菜单当前的选中值 |
| on-update:expanded-keys | `(keys: string[]) => void` | `undefined` | `keys` 是展开菜单项的 `key` 的数组 |
| on-update:value | `(key: string, item: MenuItem) => void` | `undefined` | 选中菜单的回调，`key` 是选中菜单项的 `key`，`item` 是菜单项原始数据 |
| on-update:value | `(key: string, item: MenuOption) => void` | `undefined` | 选中菜单的回调，`key` 是选中菜单项的 `key`，`item` 是菜单项原始数据 |
### MenuItem Properties
### Menu Properties
| 名称 | 类型 | 说明 |
| --------- | ---------------------------- | -------------- |
| disabled? | `boolean` | |
| extra? | `string \| () => VNodeChild` | |
| icon? | `() => VNode` | |
| key | `string` | 菜单项的标识符 |
| label | `string \| () => VNodeChild` | |
| 名称 | 类型 | 说明 |
| --------- | ------------------------------ | -------------- |
| disabled? | `boolean` | |
| extra? | `string \| (() => VNodeChild)` | |
| icon? | `() => VNode` | |
| key | `string` | 菜单项的标识符 |
| label | `string \| (() => VNodeChild)` | |
### Submenu Properties
| 名称 | 类型 | 说明 |
| --------- | --------------------------------------------- | -------------- |
| children | `Array<MenuItem \| Submenu \| MenuItemGroup>` | |
| disabled? | `boolean` | |
| extra? | `string \| () => VNodeChild` | |
| icon? | `() => VNodeChild` | |
| key | `string` | 菜单项的标识符 |
| label | `string \| (() => VNodeChild)` | |
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| children | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | |
| disabled? | `boolean` | |
| extra? | `string \| (() => VNodeChild)` | |
| icon? | `() => VNodeChild` | |
| key | `string` | 菜单项的标识符 |
| label | `string \| (() => VNodeChild)` | |
### MenuItemGroup Properties
### MenuOptionGroup Properties
| 名称 | 类型 | 说明 |
| -------- | --------------------------------------------- | -------------- |
| children | `Array<MenuItem \| Submenu \| MenuItemGroup>` | |
| key | `string` | 菜单项的标识符 |
| label | `string \| (() => VNodeChild)` | |
| type | `'group'` | |
| 名称 | 类型 | 说明 |
| --- | --- | --- |
| children | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | |
| key | `string` | 菜单项的标识符 |
| label | `string \| (() => VNodeChild)` | |
| type | `'group'` | |

31
src/menu/demos/zhCN/long-label.demo.md Normal file
View File

@ -0,0 +1,31 @@
# 菜单内容很长
将 `label` 设为渲染函数，结合 `n-ellpisis`。
```html
<n-menu :options="options" style="width: 180px;" default-value="1" />
```
```js
import { defineComponent, h } from 'vue'
import { NEllipsis } from 'naive-ui'
export default defineComponent({
setup () {
return {
options: [
{
label: () =>
h(NEllipsis, null, { default: () => '电灯熄灭 物换星移 泥牛入海' }),
key: '1'
},
{
label: () =>
h(NEllipsis, null, { default: () => '黑暗好像 一颗巨石 按在胸口' }),
key: '2'
}
]
}
}
})
```

6
src/menu/src/MenuItem.tsx → src/menu/src/MenuOption.tsx
View File

@ -1,7 +1,7 @@
import { h, computed, defineComponent, toRef, PropType } from 'vue'
import { useMemo } from 'vooks'
import { NTooltip } from '../../tooltip'
import NMenuItemContent from './MenuItemContent'
import NMenuOptionContent from './MenuOptionContent'
import { useMenuChild } from './use-menu-child'
import { TmNode } from './interface'
@ -20,7 +20,7 @@ export const menuItemProps = {
} as const
export default defineComponent({
name: 'MenuItem',
name: 'MenuOption',
props: menuItemProps,
setup (props) {
const MenuChild = useMenuChild(props)
@ -88,7 +88,7 @@ export default defineComponent({
{{
default: () => this.title,
trigger: () => {
return h(NMenuItemContent, {
return h(NMenuOptionContent, {
paddingLeft: this.paddingLeft,
iconMarginRight: this.iconMarginRight,
maxIconSize: this.maxIconSize,

2
src/menu/src/MenuItemContent.tsx → src/menu/src/MenuOptionContent.tsx
View File

@ -4,7 +4,7 @@ import { render as Render } from '../../_utils'
import { NBaseIcon } from '../../_internal'
export default defineComponent({
name: 'MenuItemContent',
name: 'MenuOptionContent',
props: {
collapsed: {
type: Boolean,

8
src/menu/src/MenuItemGroup.tsx → src/menu/src/MenuOptionGroup.tsx
View File

@ -1,7 +1,7 @@
import { h, defineComponent, provide, PropType, reactive, Fragment } from 'vue'
import { render as Render } from '../../_utils'
import { useMenuChild } from './use-menu-child'
import type { MenuItemGroupInjection } from './use-menu-child'
import type { MenuOptionGroupInjection } from './use-menu-child'
import { itemRenderer } from './utils'
import { TmNode } from './interface'
@ -14,13 +14,13 @@ export const menuItemGroupProps = {
} as const
export default defineComponent({
name: 'MenuItemGroup',
name: 'MenuOptionGroup',
props: menuItemGroupProps,
setup (props) {
provide('NSubmenu', null)
const MenuChild = useMenuChild(props)
provide<MenuItemGroupInjection>(
'NMenuItemGroup',
provide<MenuOptionGroupInjection>(
'NMenuOptionGroup',
reactive({ paddingLeft: MenuChild.paddingLeft })
)
return function () {

6
src/menu/src/Submenu.ts
View File

@ -12,7 +12,7 @@ import {
import { useMemo } from 'vooks'
import { NFadeInExpandTransition } from '../../_internal'
import { NDropdown } from '../../dropdown'
import NMenuItemContent from './MenuItemContent'
import NMenuOptionContent from './MenuOptionContent'
import { itemRenderer } from './utils'
import { useMenuChild } from './use-menu-child'
import type { SubmenuInjection } from './use-menu-child'
@ -57,7 +57,7 @@ export default defineComponent({
mergedDisabled: mergedDisabledRef
})
)
provide('NMenuItemGroup', null)
provide('NMenuOptionGroup', null)
function doClick (): void {
const { onClick } = props
if (onClick) onClick()
@ -118,7 +118,7 @@ export default defineComponent({
dropdownShow,
iconMarginRight
} = this
return h(NMenuItemContent, {
return h(NMenuOptionContent, {
paddingLeft,
collapsed,
disabled: mergedDisabled,

10
src/menu/src/use-menu-child.ts
View File

@ -28,7 +28,7 @@ export interface SubmenuInjection {
mergedDisabled: boolean
}
export interface MenuItemGroupInjection {
export interface MenuOptionGroupInjection {
paddingLeft: number | undefined
}
@ -62,8 +62,8 @@ export interface UseMenuChild {
function useMenuChild (props: UseMenuChildProps): UseMenuChild {
const NMenu = inject<MenuInjection>('NMenu') as MenuInjection
const NSubmenu = inject<SubmenuInjection | null>('NSubmenu', null)
const NMenuItemGroup = inject<MenuItemGroupInjection | null>(
'NMenuItemGroup',
const NMenuOptionGroup = inject<MenuOptionGroupInjection | null>(
'NMenuOptionGroup',
null
)
const horizontalRef = computed(() => {
@ -95,8 +95,8 @@ function useMenuChild (props: UseMenuChildProps): UseMenuChild {
if (NMenu.collapsed) return collapsedWidth / 2 - maxIconSizeRef.value / 2
return mergedRootIndent
}
if (NMenuItemGroup) {
return indent / 2 + (NMenuItemGroup.paddingLeft as number)
if (NMenuOptionGroup) {
return indent / 2 + (NMenuOptionGroup.paddingLeft as number)
}
if (NSubmenu) {
return (isGroup ? indent / 2 : indent) + (NSubmenu.paddingLeft as number)

8
src/menu/src/utils.ts
View File

@ -1,9 +1,9 @@
import { h, VNode, VNodeChild } from 'vue'
import type { TreeNode } from 'treemate'
import { keep, keysOf } from '../../_utils'
import NMenuItemGroup, { menuItemGroupProps } from './MenuItemGroup'
import NMenuOptionGroup, { menuItemGroupProps } from './MenuOptionGroup'
import NSubmenu, { submenuProps } from './Submenu'
import NMenuItem, { menuItemProps } from './MenuItem'
import NMenuOption, { menuItemProps } from './MenuOption'
import { MenuOption, MenuGroupOption } from './interface'
const groupPropKeys = keysOf(menuItemGroupProps)
@ -31,7 +31,7 @@ export function itemRenderer (
if (tmNode.children) {
if (tmNode.isGroup) {
return h(
NMenuItemGroup,
NMenuOptionGroup,
keep(props, groupPropKeys, { tmNodes: tmNode.children, key })
)
}
@ -45,7 +45,7 @@ export function itemRenderer (
)
} else {
return h(
NMenuItem,
NMenuOption,
keep(props, itemPropKeys, {
key,
tmNode