Components/Data display

ETour Tour

import EUI 1.0

Examples

Placement, masks and target interaction

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width EButton { id: targetButton text: qsTr("Start tour") onClicked: tour.start() } ETour { id: tour placement: "bottom-start" targetAreaClickable: true gap: ({ offset: 8, radius: 6 }) steps: [{ target: targetButton, title: qsTr("Action entry"), description: qsTr("The target remains clickable during the tour.") }, { title: qsTr("Done"), description: qsTr("A tour card without a target appears in the center.") }] } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Tour

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { EButton { id: startButton text: "Start tour" onClicked: tour.start() } ETour { id: tour steps: [{ "target": startButton, "title": qsTr("Start"), "description": qsTr("Click this button.") }] } }

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

closeOnPressEscapebool

Allow Escape to close the component.

Defaulttrue

closePolicyenum

Automatic popup closing conditions; flags can be combined.

Popup.* (combine with |)
NoAutoClose
CloseOnPressOutside
CloseOnPressOutsideParent
CloseOnReleaseOutside
CloseOnReleaseOutsideParent
CloseOnEscape

DefaultcloseOnPressEscape ? Popup.CloseOnEscape : Popup.NoAutoClose

currentStepint

Current tour step index, starting at 0.

Default0

descriptionDelegateComponent

Component slot for custom description; null uses the default content. See this page’s examples for delegate context.

Defaultnull

enabledbool

Allow interaction; false disables the control.

Defaulttrue

focusbool

Whether the popup requests focus.

Defaulttrue

gapvar

Watermark gap array or tour highlight gap settings.

Fields:
offset, radius

Default({ offset: 6, radius: 4 })

headerDelegateComponent

Component slot for custom header; null uses the default content. See this page’s examples for delegate context.

Defaultnull

heightreal

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

DefaultDynamic binding

indicatorsDelegateComponent

Component slot for custom tour indicators; null uses the default content. See this page’s examples for delegate context.

Defaultnull

maskbool

Show a mask; scrollbars also support edge-fade mask settings.

Defaulttrue

maskColorcolor

Mask color.

DefaultDynamic binding

modalbool

Use a modal popup that blocks interaction with underlying content.

Default!targetAreaClickable

placementstring

Position of the tour card relative to its target.

"top" / "top-start"
"top-end" / "bottom"
"bottom-start" / "bottom-end"
"left" / "left-start"
"left-end" / "right"
"right-start" / "right-end"

Default"bottom"

scrollIntoViewbool

Scroll the target into view when starting a step.

Defaulttrue

scrollIntoViewOptionsvar

Scroll positioning options with behavior, block and inline.

Fields:
block, inline

Default({block: "center", inline: "nearest"})

showArrowbool

Show the popup or tour arrow.

Defaulttrue

showClosebool

Show a close or remove button.

Defaulttrue

stepsvar

Array of tour step data.

Fields:
target, title, description
placement, type, mask
headerDelegate, descriptionDelegate, nextButtonProps
prevButtonProps, scrollIntoViewOptions

Default[]

targetAreaClickablebool

Allow clicking the target in the tour highlight area.

Defaultfalse

typestring

Visual style of the tour card.

"default" / "primary"

Default"default"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultDynamic binding

cardPositionpointRead only

Computed coordinates of the tour card.

Fields: x, y

DefaultComputed at runtime

effectiveMaskboolRead only

Resolved mask visibility for the current tour step.

DefaultComputed at runtime

effectivePlacementstringRead only

Position of the tour card relative to its target.

"top" / "top-start"
"top-end" / "bottom"
"bottom-start" / "bottom-end"
"left" / "left-start"
"left-end" / "right"
"right-start" / "right-end"

DefaultComputed at runtime

effectiveScrollOptionsvarRead only

Scroll options used by the current tour step.

Fields:
block, inline

DefaultComputed at runtime

effectiveTypestringRead only

Visual style used by the current tour step.

"default" / "primary"

DefaultComputed at runtime

finalStepboolRead only

Whether this is the final tour step.

DefaultComputed at runtime

gapOffsetrealRead only

Actual gap between tour highlight and target.

DefaultComputed at runtime

gapRadiusrealRead only

Tour highlight corner radius.

DefaultComputed at runtime

highlightrectRead only

Geometry of the tour target highlight.

Fields: x, y, width, height

DefaultComputed at runtime

nextButtonPropsvarRead only

Next or previous button settings for the current tour step.

Fields:
text, visible, disabled
size, styleType

DefaultComputed at runtime

previousButtonPropsvarRead only

Next or previous button settings for the current tour step.

Fields:
text, visible, disabled
size, styleType

DefaultComputed at runtime

stepvarRead only

Increment step; sliders may override stepSize, while time-select uses minutes or HH:mm.

DefaultComputed at runtime

stepCountintRead only

Total tour step count.

DefaultComputed at runtime

targetItemRead only

Target item for scrolling, positioning or the loading overlay.

DefaultComputed at runtime

targetPositionpointRead only

Computed target coordinates and dimensions for affix or tour.

Fields: x, y

DefaultComputed at runtime

Signals

SignaturePurpose

finished()

Emitted when the tour finishes.

changed(int index)

Emitted when the tour step changes; index is the current step index.

Methods

SignaturePurpose

previous()

Move to the previous item or step.

start()

Start the tour at the first step.

next()

Move to the next item or step.

goTo(index)

Go to the tour step at index.