组件/导航组件

EMenu 菜单

import EUI 1.0

示例与代码

层级与溢出菜单

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: Math.min(640, parent.width) height: 480 Column { width: parent.width - 48 spacing: 16 anchors.centerIn: parent EMenu { width: parent.width direction: EOrientation.Horizontal objectName: "webNavigationMenu" model: [{index: "workspace", text: qsTr("工作区"), children: [ {index: "open", text: qsTr("打开项目")}, {index: "recent", text: qsTr("最近使用"), children: [{index: "gallery", text: "EUI Gallery"}]}]}, {index: "settings", text: qsTr("设置")}, {index: "restricted", text: qsTr("受限操作"), disabled: true}] } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

菜单

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width EMenu { width: 260 uniqueOpened: true currentIndex: "home" model: [{ "index": "home", "text": "Home", "iconSource": EIcons.HOUSE }, { "index": "workspace", "text": "Workspace", "children": [{ "index": "projects", "text": "Projects" }, { "index": "reports", "text": "Reports" }] }] onItemSelected: function(index, indexPath, item) { console.log(index, indexPath, item.text) } } EMenu { width: parent.width currentIndex: "products" styleType: EStyle.Success direction: EOrientation.Horizontal model: [{ "index": "products", "text": qsTr("产品"), "iconSource": EIcons.STAR }, { "index": "solutions", "text": qsTr("解决方案"), "iconSource": EIcons.COMPASS }, { "index": "support", "text": qsTr("支持"), "iconSource": EIcons.BELL }] } EMenu { width: 64 indent: 18 iconSize: 20 duration: 260 collapse: true itemHeight: 48 uniqueOpened: false currentIndex: "favorites" styleType: EStyle.Warning textColor: EPaletteManager.BasePalette.gainsboro backgroundColor: EPaletteManager.BasePalette.black hoverColor: EPaletteManager.BasePalette.charcoalGray activeTextColor: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Warning) model: [{ "index": "favorites", "text": qsTr("收藏"), "iconSource": EIcons.STAR }, { "index": "notifications", "text": qsTr("通知"), "iconSource": EIcons.BELL }] } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

activeTextColorcolor

当前选中项的文字颜色。

默认值动态绑定

backgroundColorcolor

背景颜色。

默认值动态绑定

closeOnClickOutsidebool

点击弹层外部时关闭。

默认值true

collapsebool

使用折叠菜单。

默认值false

collapseCloseIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_RIGHT

collapseOpenIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_RIGHT

collapseTransitionbool

折叠菜单变化时播放过渡动画。

默认值false

currentIndexstring

当前选中菜单项的标识。

菜单项标识
""：未选择

默认值""

directionint

组件的排列方向。

EOrientation.Horizontal
EOrientation.Vertical

默认值EOrientation.Vertical

durationint

动画或显示持续时间，单位为毫秒；组件的绑定表达式给出实际用途。

默认值180

ellipsisbool

横向菜单空间不足时折叠到更多菜单。

默认值true

ellipsisIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.ELLIPSIS

enabledbool

是否允许交互；false 时控件禁用。

默认值true

expandCloseIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_DOWN

expandOpenIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CHEVRON_UP

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

hideTimeoutint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值150

hoverColorcolor

悬停背景颜色。

默认值动态绑定

iconSizeint

图标、选项或交互部件的尺寸，单位为像素。

默认值16

indentint

树节点或菜单子项每级的缩进，单位为像素。

默认值20

itemHeightint

菜单项、数据行或表头行的高度，单位为像素。

默认值44

menuTriggerstring

打开子菜单的触发方式。

"hover" / "click"

默认值"hover"

modelvar

组件的数据源；数组项结构以当前示例及组件说明为准。

默认值[]

openedIndexesvar

已展开节点、表格行或菜单项的唯一键数组。

默认值[]

persistentbool

关闭后保留弹层内容实例。

默认值true

popperEffectstring

弹层的视觉主题。

"light" / "dark"

默认值"light"

popperOffsetreal

弹出菜单与参考项之间的间距，单位为像素。

默认值0

showTimeoutint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值150

styleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Primary

textColorcolor

文字颜色。

默认值动态绑定

uniqueOpenedbool

同一级菜单最多展开一个子菜单。

默认值true

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

allEntriesvar只读

展开层级后的全部菜单条目。

默认值由运行时计算

displayItemsvar只读

横向菜单直接显示的条目。

默认值由运行时计算

horizontalbool只读

实际布局是否采用水平或垂直方向。

默认值由运行时计算

naturalWidthreal只读

菜单内容未折叠时所需的自然宽度。

默认值由运行时计算

overflowItemsvar只读

横向菜单被收入更多菜单的项目。

默认值由运行时计算

popupModebool只读

菜单是否采用浮层子菜单。

默认值由运行时计算

resolvedActiveTextColorcolor只读

根据主题、当前状态及自定义配色确定的实际颜色。

默认值由运行时计算

resolvedBackgroundColorcolor只读

根据主题、当前状态及自定义配色确定的实际颜色。

默认值由运行时计算

resolvedHoverColorcolor只读

根据主题、当前状态及自定义配色确定的实际颜色。

默认值由运行时计算

resolvedTextColorcolor只读

根据主题、当前状态及自定义配色确定的实际颜色。

默认值由运行时计算

visibleItemsvar只读

当前可见的菜单条目。

默认值由运行时计算

visibleRootCountint只读

横向菜单当前直接显示的根条目数量。

默认值由运行时计算

信号

签名作用

closed(string index)

子菜单关闭时触发，index 为子菜单标识。

opened(string index)

子菜单打开时触发，index 为子菜单标识。

branchClosed(string index, var indexPath)

子菜单分支关闭时触发，index 为标识，indexPath 为完整菜单路径。

branchOpened(string index, var indexPath)

子菜单分支打开时触发，index 为标识，indexPath 为完整菜单路径。

itemSelected(string index, var indexPath, var item)

选择菜单项时触发，index 为标识，indexPath 为完整路径，item 为菜单数据。

方法

签名作用

toggle(index)

切换当前展开或选中状态；需要标识时传入目标项的标识。

isOpened(index)

判断 index 对应的子菜单是否打开。

trigger(index, item)

触发给定项目的命令，相当于选择该命令项。

updateActiveIndex(index)

设置当前激活菜单项的标识。

select(index)

激活 index 对应的菜单项。

close(index)

关闭 index 对应的子菜单。

open(index)

打开 index 对应的子菜单。