组件/导航组件引入于 1.3.0

EMegaMenu 多列菜单

import EUI 1.0

示例与代码

多列菜单

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 model: [{ "label": qsTr("工作区"), "children": [{ "label": qsTr("设计"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("开发"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("帮助"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

效果

运行代码，体验组件交互

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

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

纵向菜单

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 180 vertical: true model: [{ "label": qsTr("工作区"), "children": [{ "label": qsTr("设计"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("开发"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("帮助"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

效果

运行代码，体验组件交互

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

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

宽菜单列

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 columnWidth: 240 model: [{ "label": qsTr("工作区"), "children": [{ "label": qsTr("设计"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("开发"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("帮助"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

效果

运行代码，体验组件交互

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

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

命令反馈

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 model: [{ "label": qsTr("工作区"), "children": [{ "label": qsTr("设计"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("开发"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("帮助"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] onCommand: function(command, item) { sampleFeedback.open(String(command)) } EMessage { id: sampleFeedback type: EStyle.Success objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

禁用菜单

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMegaMenu { width: 520 enabled: false model: [{ "label": qsTr("工作区"), "children": [{ "label": qsTr("设计"), "children": [{ "label": "Assets", "command": "assets" }, { "label": "Themes", "command": "themes" }] }, { "label": qsTr("开发"), "children": [{ "label": "Code", "command": "code" }, { "label": "Build", "command": "build" }] }] }, { "label": qsTr("帮助"), "children": [{ "label": "Learn", "children": [{ "label": "Docs", "command": "docs" }] }] }] }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

modelvar

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

默认值[]

activeIndexint

当前打开的多列菜单索引，-1 表示关闭。

-1：未选择
0 起：条目索引

默认值-1

columnWidthint

展开菜单中每一分组列的宽度。

默认值180

verticalbool

顶层导航条是否竖向排列。

默认值false

groupsvar只读

当前多列菜单下的分组。

默认值

展开默认值

activeIndex >= 0 && Array.isArray(model) && model[activeIndex] && Array.isArray(model[activeIndex].children) ? model[activeIndex].children : []

信号

签名作用

command(var command, var item)

执行命令时触发，包含命令值和对应菜单项。

方法

签名作用

close()

关闭组件的面板或弹窗。

trigger(item)

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

open(index)

打开组件的面板或弹窗。