Ant Design Blazor
Menu导航菜单
为页面和功能提供导航的菜单列表。
何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
更多布局和导航的使用可以参考：通用布局。
Examples
水平的顶部导航菜单。
垂直菜单，子菜单内嵌在菜单区域。
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
也可以直接使用手风琴模式， 点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
子菜单是弹出的形式。
内建了两套主题 light|dark，默认 light。
展示动态切换模式。
自动根据路由激活菜单项，使用 RouterLink 属性。
可以使用 IconTemplate 属性来在菜单中使用自定义图标。
Menu API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Theme | 属性菜单的颜色主题 | MenuTheme | MenuTheme.Light |
| Mode | 属性菜单类型 | MenuMode | MenuMode.Vertical |
| ChildContent | 属性菜单内容。应包含 MenuItem 元素。 | RenderFragment | -- |
| OnSubmenuClicked | 属性单击子菜单时的回调 | EventCallback<SubMenu> | -- |
| OnMenuItemClicked | 属性单击主菜单项时的回调 | EventCallback<MenuItem> | -- |
| Accordion | 属性手风琴模式。当为 true 时，一次只能打开一个子菜单。 | Boolean | false |
| Selectable | 属性允许选择菜单项。当它为 false 时，在 OnClick 之后不选择菜单项。 | Boolean | true |
| Multiple | 属性允许选择多个项目 | Boolean | false |
| InlineCollapsed | 属性指定菜单为内联模式时的折叠状态 | Boolean | false |
| InlineIndent | 属性每个级别的内联菜单项的缩进（以像素为单位） | Int32 | 24 |
| AutoCloseDropdown | 属性单击项目时关闭下拉菜单 | Boolean | true |
| DefaultSelectedKeys | 属性带有默认选定菜单项键的数组 | IEnumerable<String> | -- |
| DefaultOpenKeys | 属性默认打开的子菜单的键数组 | IEnumerable<String> | -- |
| OpenKeys | 属性包含当前打开的子菜单的键的数组 | String[] | -- |
| OpenKeysChanged | 属性当打开的子菜单改变时回调。传递了一组打开的键。 | EventCallback<String[]> | -- |
| OnOpenChange | 属性当打开的子菜单改变时回调。传递了一组打开的键。 | EventCallback<String[]> | -- |
| SelectedKeys | 属性Array 替换为当前选中的菜单项的键，设置 empty array 来清除选择，而不是 null。 | String[] | [] |
| SelectedKeysChanged | 属性所选项目更改时回调。传递的打开键数组。 | EventCallback<String[]> | -- |
| TriggerSubMenuAction | 属性哪个动作可以触发子菜单打开/关闭 | Trigger | Trigger.Hover |
| ShowCollapsedTooltip | 属性在折叠菜单上显示提示框 | Boolean | -- |
| Animation | 属性启用或禁用动画 | Boolean | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
MenuItem API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性显示标题 | RenderFragment | -- |
| Key | 属性菜单项的唯一 ID | String | Uniquely Generated ID |
| Disabled | 属性菜单项是否被禁用 | Boolean | false |
| OnClick | 属性单击项目时的回调 | EventCallback<MouseEventArgs> | -- |
| RouterLink | 属性参考路线 | String | -- |
| RouterMatch | 属性修改 NavLink 的 URL 匹配行为 | NavLinkMatch | NavLinkMatch.All |
| Title | 属性菜单项的标题 | String | -- |
| Icon | 属性菜单项的图标 | String | -- |
| IconTemplate | 属性自定义图标模板，当同时设置Icon和IconTemplate时，优先使用IconTemplate | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
SubMenu API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Placement | 属性菜单放置 | Placement? | -- |
| PopupClassName | 属性弹出窗口的类名 | String | -- |
| Title | 属性标题 | String | -- |
| TitleTemplate | 属性标题模板 | RenderFragment | -- |
| ChildContent | 属性子菜单或子菜单项 | RenderFragment | -- |
| Key | 属性子菜单的唯一 ID | String | Uniquely Generated ID |
| Disabled | 属性子菜单是否禁用 | Boolean | false |
| IsOpen | 属性子菜单的打开状态 | Boolean | false |
| OnTitleClick | 属性单击 SubMenu 标题时执行的回调 | EventCallback<MouseEventArgs> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
MenuItemGroup API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Title | 属性小组名称 | String | -- |
| TitleTemplate | 属性小组名称 | RenderFragment | -- |
| ChildContent | 属性子菜单或菜单项 | RenderFragment | -- |
| Key | 属性唯一身份 | String | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
MenuDivider API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |