Onboarding Tutorial
import QtQuick
import QtQuick.Controls as QQC2
import QtQuick.Layouts
import org.kde.kirigami as Kirigami
import org.kde.kirigami.platform as Platform
import org.kde.kirigamiaddons.onboarding
Kirigami.ApplicationWindow {
id: root
height: 480
title: qsTr("Kirigami Addons Onboarding Tutorial")
visible: true
width: 640
Onboarding.onFinished: swipeView.currentIndex = 0
Shortcut {
context: Qt.ApplicationShortcut
sequence: "F1"
onActivated: Onboarding.start()
}
Shortcut {
context: Qt.ApplicationShortcut
sequence: "F2"
onActivated: Onboarding.start("advanced")
}
Component {
id: onboardingAdditionalData
ColumnLayout {
readonly property var additionalData: Onboarding.currentItem?.additionalData ?? ({})
Platform.Theme.colorSet: Platform.Theme.Tooltip
Platform.Theme.inherit: false
implicitWidth: Math.max(video.Layout.preferredWidth, videoCaption.implicitWidth)
spacing: 0
visible: video.source.toString().length > 0
AnimatedImage {
id: video
Layout.alignment: Qt.AlignHCenter
Layout.maximumHeight: Kirigami.Units.gridUnit * 7
Layout.maximumWidth: Kirigami.Units.gridUnit * 14
Layout.preferredHeight: implicitWidth > 0 ? Math.min(Layout.preferredWidth * implicitHeight / implicitWidth, Layout.maximumHeight) : 0
Layout.preferredWidth: implicitHeight > 0 && implicitWidth > 0 ? Math.min(implicitWidth, Layout.maximumWidth, Layout.maximumHeight * implicitWidth / implicitHeight) : 0
fillMode: Image.PreserveAspectFit
sourceSize.width: Layout.maximumWidth
source: parent.additionalData.video ?? ""
}
QQC2.Label {
id: videoCaption
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: Math.min(implicitWidth, video.Layout.preferredWidth)
color: Platform.Theme.textColor
horizontalAlignment: Text.AlignHCenter
text: parent.additionalData.videoCaption ?? ""
visible: text.length > 0
wrapMode: Text.WordWrap
}
}
}
Binding {
target: Onboarding
property: "additionalDataComponent"
value: onboardingAdditionalData
}
Item {
id: pageHost
anchors.fill: parent
Onboarding.isSource: true
Onboarding.sourceGroups: ["", "advanced"]
ColumnLayout {
anchors.fill: parent
spacing: 0
QQC2.SwipeView {
id: swipeView
Layout.fillHeight: true
Layout.fillWidth: true
interactive: !Onboarding.active
Page1 {
swipeView: swipeView
}
Page2 {
swipeView: swipeView
}
Page3 {
swipeView: swipeView
}
}
QQC2.PageIndicator {
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Kirigami.Units.largeSpacing
count: swipeView.count
currentIndex: swipeView.currentIndex
}
}
}
}