No Food. 没有食物。
A horiziontal menu which can automatically collapse its items.
一个可以自动折叠其项目的水平菜单。
Usually you can use vue-router here to accomplish routing. Also, you can render label
as <router-link />
or <a />
to set route.
通常这里可以使用vue-router来完成路由。另外,您可以将label
渲染为<router-link />
或<a />
来设置路由。
The render-label
, render-icon
, expand-icon
can be used to batch render menu options.render-label
、 render-icon
、 expand-icon
可用于批量渲染菜单选项。
If you don't set default-expanded-keys
, menu will expand all the ascendant of selected option by default.
如果不设置default-expanded-keys
,菜单将默认展开所选选项的所有上升项。
You can specify indent
& root-indent
of the menu. root-indent
only determines the first-leveled children.
您可以指定菜单的indent
和root-indent
。 root-indent
仅确定第一级子级。
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
. For details see API table at the bottom of the page.
使用带有布局侧边的可折叠垂直菜单。使用collapsed
来控制菜单的折叠状态。您必须设置collapsed-width
以使其以正确的方式折叠。您还可以修改其他一些与折叠相关的属性: icon-size
、 collapsed-icon-size
。详细信息请参见页面底部的 API 表。
Set inverted
to add contrast. Usually used with n-layout
.
设置inverted
以增加对比度。通常与n-layout
一起使用。
Set label
to render function that renders n-ellipsis
.
将label
设置为渲染n-ellipsis
的渲染函数。
Like an accordion. You can use accordion
prop to switch this mode for the first-level menu.
就像手风琴一样。您可以使用accordion
属性来切换一级菜单的此模式。
Usually you can use vue-router here to accomplish routing. You can render label
as <router-link />
to set route.
通常这里可以使用vue-router来完成路由。您可以将label
渲染为<router-link />
来设置路由。
Various data would come from backend, you can customize key
, label
and children
's field name.
各种数据都来自后端,您可以自定义key
、 label
和children
的字段名称。
In some scenes, menu's value is passed from outside. The component is hard to understand what behavior is expected. You can use showOption
method to make specified option displayed.
在某些场景中,菜单的值是从外部传递的。该组件很难理解预期的行为。您可以使用showOption
方法来显示指定的选项。
Name | Type | Default | Description | Version |
---|---|---|---|---|
accordion | boolean | false | Whether to use accordion mode. | |
children-field | string | 'children' | Field name of children. | |
collapsed-icon-size | number | 24 | The icon size when menu is collapsed. If not set, menu will use icon-size in place of it. | |
collapsed-width | number | 48 | The menu width after collapsed. | |
collapsed | boolean | false | The collapsed status of menu, only works when menu is vertical. | |
default-expand-all | boolean | false | Whether to expand all menus. When options is set asynchronously, you can set watch-props to ['defaultExpandedKeys'] to make it work. | |
default-expanded-keys | Array<string> | [] | The default expanded submenu keys of menu in uncontrolled manner. | |
default-value | string | null | null | Whether selected by default in uncontrolled mode. | |
disabled-field | string | '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-props | DropdownProps | undefined | The dropdown's props when menu is collapsed or horizontal mode,please see Dropdown Props | |
expanded-keys | Array<string> | undefined | The expanded submenu keys. If set, menu will work in controlled manner and default-expanded-names won't work. | |
expand-icon | (option: MenuOption) => VNodeChild | undefined | Render function that renders all expand icon. | |
icon-size | number | 20 | The icon size when menu is not collapsed. | |
indent | number | 32 | The indent of menu. | |
inverted | boolean | false | Use inverted style. | |
key-field | string | 'key' | Field name of key. | |
label-field | string | 'label' | Field name of label. | |
options | Array<MenuOption | MenuDividerOption | MenuGroupOption> | [] | Items data of menu. | |
node-props | (option: MenuOption | MenuGroupOption) => object | undefined | Node's DOM attrs generator. | 2.28.3 |
mode | 'vertical' | 'horizontal' | 'vertical' | Menu layout. | |
render-extra | (option: MenuOption | MenuGroupOption) => VNodeChild | undefined | Render function that renders all extras. | |
render-icon | (option: MenuOption) => VNodeChild | undefined | Render function that renders all icons. | |
render-label | (option: MenuOption | MenuGroupOption) => VNodeChild | undefined | Render function that renders all labels. | |
responsive | boolean | false | Whether to collapsed menu items that overflows menu. Only work for menu with mode='horizontal' . | 2.36.0 |
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 item key of the menu. | |
watch-props | Array<'defaultValue' | 'defaultExpandedKeys'> | undefined | Default 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[]) => void | undefined | keys is the array of expanded menu options' key . | |
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. |
Name | Type | Description | Version |
---|---|---|---|
children? | Array<MenuOption | MenuGroupOption> | Child menu options. | |
disabled? | boolean | Whether to disable the menu item. | |
extra? | string | (() => VNodeChild) | The extra parts of the menu item. | |
icon? | () => VNodeChild | The icon for the menu item. | |
key | string | The identifier of the menu item. | |
label | string | (() => VNodeChild) | The label of the menu item. | |
show? | boolean | Whether to show the menu item. | 2.32.2 |
Name | Type | Description | Version |
---|---|---|---|
children | Array<MenuOption | MenuGroupOption> | Group items, required! | |
key | string | The identifier of the menu group. | |
label | string | (() => VNodeChild) | The label of the menu item. | |
show? | boolean | Whether to show the menu item. | 2.32.2 |
type | 'group' | The type of the menu item, required! |
Name | Type | Description | Version |
---|---|---|---|
key | string | The identifier of the menu group. | |
props | HTMLAttributes | Attributes of the divider. | |
show? | boolean | Whether to show the menu item. | 2.32.2 |
type | 'divider' | The type of the menu item, required! |
Name | Type | Description | Version |
---|---|---|---|
deriveResponsiveState | () => void | Recalculate 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) => void | Expand menu to show option with specified key . If key is not specified, selected option will be displayed. | 2.27.0 |