Components/Navigation

ETabs Tabs

import EUI 1.0

Examples

Guarded tabs and lazy content

QML sourceQML

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 ESwitch { id: webNavigationAllowLeave checked: true text: qsTr("Allow switching") } ETabs { lazy: true width: parent.width objectName: "webNavigationTabs" beforeLeave: function() { return webNavigationAllowLeave.checked } model: [{text: qsTr("Overview"), name: "overview", contentComponent: webNavigationOverviewPane}, {text: qsTr("Activity"), name: "activity", contentComponent: webNavigationActivityPane}] } Component { id: webNavigationOverviewPane EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("Overview is created on first use and keeps its state when revisited.") } } Component { id: webNavigationActivityPane EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("The activity pane has its own lifecycle.") } } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Tabs

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ETabs { currentIndex: 0 model: ["Overview", "Settings"] }

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

addIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.PLUS

addablebool

Show the tab-add button.

Defaultfalse

beforeLeavevar

Guard before leaving a tab, receiving new and old identifiers and returning a boolean or Promise.

Defaultnull

closablebool

Show a close or remove button.

Defaultfalse

currentIndexint

Index of the current selected or displayed item.

-1: no selection
0 and above: item index

Default0

editablebool

Allow input editing or enable both tab addition and closing.

Defaultfalse

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

lazybool

Create content or load data on demand; data controls use load / lazyLoad.

Defaultfalse

modelvar

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

Default[]

movablebool

Allow dragging tabs to reorder them.

Defaultfalse

navigationWidthreal

Side tab navigation width in pixels.

Default140

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

stretchbool

Distribute tabs evenly across the navigation width.

Defaultfalse

tabPositionstring

Position of the tab bar relative to its content.

"top" / "bottom"
"left" / "right"

Default"top"

typestring

Visual style of the tabs.

"line" / "card"
"border-card"

Default"line"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

activePanealiasRead only

Content item of the active tab.

DefaultAlias: panes.currentItem

countintRead only

Skeleton instance count or current item count, depending on the component.

DefaultComputed at runtime

currentNamevarRead only

Name of the current tab.

DefaultComputed at runtime

navigationaliasRead only

Internal tab navigation list item.

DefaultAlias: tabBar

verticalboolRead only

Whether the resolved layout is horizontal or vertical.

DefaultComputed at runtime

Signals

SignaturePurpose

tabAddRequested()

Emitted when the add-tab button is clicked; add a tab in the application.

tabChanged(var name)

Emitted when the active tab changes; name identifies the tab.

tabMoved(int from, int to)

Emitted after reordering tabs; from and to are the old and new indices.

selectionRejected(int index)

Emitted when tab switching is rejected; index is the requested tab index.

tabClosed(int index, var item)

Emitted when a tab closes; index and item identify the closed tab.

edited(var name, string action)

Emitted when a tab is added or removed; name identifies the tab and action identifies the operation.

tabClicked(int index, var item)

Emitted when a tab is clicked; index is its index and item is its data.

Methods

SignaturePurpose

scrollToActiveTab()

Scroll the active tab into view.

requestAdd()

Request a new tab by emitting tabAddRequested.

selectName(name)

Select the tab identified by name.

closeTab(index)

Close the tab at index.

moveTab(from, to)

Move a tab from index from to index to.

select(index)

Select the item identified by the given index or key.