Components/NavigationIntroduced in 1.3.0

EDock Dock

import EUI 1.0

Examples

Hover magnification

QML sourceQML

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" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Vertical dock

QML sourceQML

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" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Large icons

QML sourceQML

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" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Fixed icons

QML sourceQML

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" }] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Command feedback

QML sourceQML

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" } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

modelvar

Component data source; item structure follows the current example and component contract.

Default[]

iconSizeint

Dock item icon size in pixels.

Default24

itemSizeint

Base size of each dock item.

Default48

magnificationreal

Dock item scale factor on hover.

Default1.35

placementstring

Dock placement: top, bottom, left, or right.

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

Default"bottom"

verticalboolRead only

True when docked on the left or right.

Defaultplacement === "left" || placement === "right"

Signals

SignaturePurpose

command(var command, var item)

Emitted when a command is invoked, with its value and menu item.

Methods

SignaturePurpose

trigger(index)

Invoke the specified item command, as if the item were selected.