Fighting DesignMenu 导航菜单
多功能导航菜单栏
基本使用
开启
不同模式
mode 属性可配置不同模式
垂直的
内联的
开启
Menu Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
mode | 不同模式 | MenuMode | horizontal vertical inline | horizontal |
active-name | 默认激活的 name | string / number | —— | —— |
on-menu-item-click | 点击 f-menu-item 时的回调 | MenuItemClick | —— | —— |
on-submenu-click | 点击 f-submenu 时的回调 | SubmenuClick | —— | —— |
MenuItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
icon | 自定义 icon | FightingIcon | —— | —— |
font-size | 文字大小 | string / number | —— | —— |
color | 文字颜色 | string | —— | —— |
to | 跳转的路径 | string | —— | —— |
name | 唯一标识 | string / number | —— | —— |
disabled | 是否禁用 | boolean | —— | false |
MenuItemGroup Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
title | 标题 | string | —— | —— |
Submenu Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
disabled | 是否禁用 | boolean | —— | false |
opened | 是否展开 | boolean | —— | false |
Menu Slots
| 名称 | 说明 |
|---|---|
default | 默认插入的内容 |
before | 主内容之前的内容 |
after | 主内容之后的内容 |
MenuItem Slots
| 名称 | 说明 |
|---|---|
default | 默认插入的内容 |
MenuItem Group Slots
| 名称 | 说明 |
|---|---|
default | 默认插入的内容 |
Submenu Slots
| 名称 | 说明 |
|---|---|
default | 默认插入的内容 |
title | 标题内容 |
Interface
组件导出以下类型定义：
ts
import type {
MenuInstance,
MenuProps,
MenuMode,
MenuItemClick,
SubmenuClick,
MenuItemInstance,
MenuItemProps,
FMenuItemGroup,
MenuItemGroupProps,
SubmenuInstance,
SubmenuProps
} from 'fighting-design'MenuMode
ts
type MenuMode = 'horizontal' | 'vertical' | 'inline'MenuItemClick
ts
type MenuItemClick = (name: string, evt: MouseEvent) => voidSubmenuClick
ts
type SubmenuClick = (target: boolean, evt: MouseEvent) => void