组件/导航组件引入于 1.3.0

EDock 停靠栏

import EUI 1.0

示例与代码

悬停放大

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDock { model: [{ "label": "Home", "iconSource": EIcons.HOUSE, "command": "home" }, { "label": "Files", "iconSource": EIcons.FOLDER, "command": "files" }, { "label": "Search", "iconSource": EIcons.MAGNIFIER, "command": "search" }] }

效果

运行代码，体验组件交互

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

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

纵向停靠栏

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDock { placement: "left" model: [{ "label": "Home", "iconSource": EIcons.HOUSE, "command": "home" }, { "label": "Files", "iconSource": EIcons.FOLDER, "command": "files" }, { "label": "Search", "iconSource": EIcons.MAGNIFIER, "command": "search" }] }

效果

运行代码，体验组件交互

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

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

大图标

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDock { iconSize: 32 itemSize: 60 model: [{ "label": "Home", "iconSource": EIcons.HOUSE, "command": "home" }, { "label": "Files", "iconSource": EIcons.FOLDER, "command": "files" }, { "label": "Search", "iconSource": EIcons.MAGNIFIER, "command": "search" }] }

效果

运行代码，体验组件交互

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

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

固定图标

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDock { magnification: 1 model: [{ "label": "Home", "iconSource": EIcons.HOUSE, "command": "home" }, { "label": "Files", "iconSource": EIcons.FOLDER, "command": "files" }, { "label": "Search", "iconSource": EIcons.MAGNIFIER, "command": "search" }] }

效果

运行代码，体验组件交互

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

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

命令反馈

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EDock { model: [{ "label": "Home", "iconSource": EIcons.HOUSE, "command": "home" }, { "label": "Files", "iconSource": EIcons.FOLDER, "command": "files" }, { "label": "Search", "iconSource": EIcons.MAGNIFIER, "command": "search" }] onCommand: function(command, item) { sampleFeedback.open(String(command)) } EMessage { id: sampleFeedback type: EStyle.Success objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

modelvar

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

默认值[]

iconSizeint

停靠条目图标的像素尺寸。

默认值24

itemSizeint

停靠栏每个条目的基础尺寸。

默认值48

magnificationreal

停靠栏条目悬停时的放大倍数。

默认值1.35

placementstring

停靠方向：top、bottom、left 或 right。

"top" / "top-start"
"top-end" / "bottom"
"bottom-start" / "bottom-end"

默认值"bottom"

verticalbool只读

停靠在左侧或右侧时为 true。

默认值placement === "left" || placement === "right"

信号

签名作用

command(var command, var item)

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

方法

签名作用

trigger(index)

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