这是用户在 2024-9-6 15:59 为 https://www.naiveui.com/en-US/os-theme/components/menu 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?

Menu 菜单

No Food. 没有食物。

Demos 演示

API

NameTypeDefaultDescriptionVersion
accordionbooleanfalseWhether to use accordion mode.
children-fieldstring'children'Field name of children.
collapsed-icon-sizenumber24The icon size when menu is collapsed. If not set, menu will use icon-size in place of it.
collapsed-widthnumber48The menu width after collapsed.
collapsedbooleanfalseThe collapsed status of menu, only works when menu is vertical.
default-expand-allbooleanfalseWhether to expand all menus. When options is set asynchronously, you can set watch-props to ['defaultExpandedKeys'] to make it work.
default-expanded-keysArray<string>[]The default expanded submenu keys of menu in uncontrolled manner.
default-valuestring | nullnullWhether selected by default in uncontrolled mode.
disabled-fieldstring'disabled'Field name of disabled.2.33.0
dropdown-placement'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top'Only effective in horizontal mode.
dropdown-propsDropdownPropsundefinedThe dropdown's props when menu is collapsed or horizontal mode,please see Dropdown Props
expanded-keysArray<string>undefinedThe expanded submenu keys. If set, menu will work in controlled manner and default-expanded-names won't work.
expand-icon(option: MenuOption) => VNodeChildundefinedRender function that renders all expand icon.
icon-sizenumber20The icon size when menu is not collapsed.
indentnumber32The indent of menu.
invertedbooleanfalseUse inverted style.
key-fieldstring'key'Field name of key.
label-fieldstring'label'Field name of label.
optionsArray<MenuOption | MenuDividerOption | MenuGroupOption>[]Items data of menu.
node-props(option: MenuOption | MenuGroupOption) => objectundefinedNode's DOM attrs generator.2.28.3
mode'vertical' | 'horizontal''vertical'Menu layout.
render-extra(option: MenuOption | MenuGroupOption) => VNodeChildundefinedRender function that renders all extras.
render-icon(option: MenuOption) => VNodeChildundefinedRender function that renders all icons.
render-label(option: MenuOption | MenuGroupOption) => VNodeChildundefinedRender function that renders all labels.
responsivebooleanfalseWhether to collapsed menu items that overflows menu. Only work for menu with mode='horizontal'.2.36.0
root-indentnumberundefinedThe indent of menu's first level children. If not set, menu will use indent in place of it.
valuestring | nullundefinedThe selected item key of the menu.
watch-propsArray<'defaultValue' | 'defaultExpandedKeys'>undefinedDefault prop names that needed to be watched. Components will be updated after the prop is changed. Note: the watch-props itself is not reactive.
on-update:expanded-keys(keys: string[]) => voidundefinedkeys is the array of expanded menu options' key.
on-update:value(key: string, item: MenuOption) => voidundefinedCallback when select a menu item. key is the key of the selected menu item. item is then original data of the menu item.
NameTypeDescriptionVersion
children?Array<MenuOption | MenuGroupOption>Child menu options.
disabled?booleanWhether to disable the menu item.
extra?string | (() => VNodeChild)The extra parts of the menu item.
icon?() => VNodeChildThe icon for the menu item.
keystringThe identifier of the menu item.
labelstring | (() => VNodeChild)The label of the menu item.
show?booleanWhether to show the menu item.2.32.2
NameTypeDescriptionVersion
childrenArray<MenuOption | MenuGroupOption>Group items, required!
keystringThe identifier of the menu group.
labelstring | (() => VNodeChild)The label of the menu item.
show?booleanWhether to show the menu item.2.32.2
type'group'The type of the menu item, required!
NameTypeDescriptionVersion
keystringThe identifier of the menu group.
propsHTMLAttributesAttributes of the divider.
show?booleanWhether to show the menu item.2.32.2
type'divider'The type of the menu item, required!
NameTypeDescriptionVersion
deriveResponsiveState() => voidRecalculate the collapsed state of the responsive menu content. When the width of the menu container is not solely determined by the external width, in the responsive mode, the menu content cannot automatically expand after being collapsed. You can call this method to ensure that the menu can be expanded again.2.36.0
showOption(key: string | number) => voidExpand menu to show option with specified key. If key is not specified, selected option will be displayed.2.27.0