Components/NavigationIntroduced in 1.2.0

EWizard Wizard

import EUI 1.0

Examples

Step-by-step setup

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) model: [{title: qsTr("Basic information"), component: firstPage}, {title: qsTr("Review configuration"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("Enter a name to continue") } } Component { id: reviewPage EText { text: qsTr("Review configuration") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Validate before navigation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) beforeLeave: function(from, to) { return to <= from || wizard.currentPage.text.length > 0 } model: [{title: qsTr("Basic information"), component: firstPage}, {title: qsTr("Review configuration"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("Enter a name to continue") } } Component { id: reviewPage EText { text: qsTr("Review configuration") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Asynchronous validation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) beforeLeave: function() { return Promise.resolve(true) } model: [{title: qsTr("Basic information"), component: firstPage}, {title: qsTr("Review configuration"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("Enter a name to continue") } } Component { id: reviewPage EText { text: qsTr("Review configuration") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Allow jumping between steps

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) allowJump: true model: [{title: qsTr("Basic information"), component: firstPage}, {title: qsTr("Review configuration"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("Enter a name to continue") } } Component { id: reviewPage EText { text: qsTr("Review configuration") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Skip disabled steps

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) model: [{title: qsTr("Basic information"), component: firstPage}, {title: qsTr("Additional settings"), disabled: true}, {title: qsTr("Review configuration"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("Enter a name to continue") } } Component { id: reviewPage EText { text: qsTr("Review configuration") } } }

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

allowJumpbool

Allow clicking the step bar to navigate while still checking beforeLeave.

Defaultfalse

beforeLeavevar

Before-navigation callback (from, to), returning a boolean or Promise; false rejects navigation.

Defaultnull

currentIndexint

Index of the currently selected command or step.

-1: no selection
0 and above: item index

Default0

enabledbool

Allow interaction; false disables the control.

Defaulttrue

finishTextstring

Finish button text.

DefaultEControlConfig.textFor(control, "WizardFinish", ELocale.texts)

fontfont

Font settings for the family, size and text style.

Common fields:
family, pixelSize, pointSize
bold, italic, weight
underline, strikeout
letterSpacing, wordSpacing

DefaultQt.font({ pixelSize: 16 })

heightreal

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

DefaultimplicitHeight

lazybool

Create a step when first visited and retain its page after leaving.

Defaulttrue

modelvar

Item model; fields are described in the examples and usage guide.

Default[]

nextTextstring

Next button text.

DefaultEControlConfig.textFor(control, "WizardNext", ELocale.texts)

previousTextstring

Previous button text.

DefaultEControlConfig.textFor(control, "WizardPrevious", ELocale.texts)

showCancelbool

Show the cancel button, which emits canceled.

Defaulttrue

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

busyboolRead only

True while awaiting asynchronous validation; prevents repeated navigation.

DefaultComputed at runtime

completeboolRead only

Whether the wizard is complete; reset() clears this state.

DefaultComputed at runtime

currentPagevarRead only

Loaded content object for the current step.

DefaultComputed at runtime

hasNextboolRead only

Whether an enabled step exists after the current step.

DefaultComputed at runtime

hasPreviousboolRead only

Whether an enabled step exists before the current step.

DefaultComputed at runtime

pagesvarRead only

Step model normalized to an array.

DefaultComputed at runtime

Signals

SignaturePurpose

canceled()

Emitted when the current operation is cancelled.

completed()

Emitted when the wizard completes; save data or finish the workflow here.

stepChanged(int index)

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

navigationRejected(int index, string reason)

Emitted when step navigation is rejected; index is the target step and reason explains why.

Methods

SignaturePurpose

previous()

Move to the previous item or step.

finish()

Attempt to finish the wizard and run completion validation.

next()

Move to the next item or step.

reset()

Restore the initial component state.

navigate(index)

Attempt to navigate to step index after running step validation.