C
Qt Quick Ultralite Motorcycle Cluster Demo
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick 2.0
Rectangle {
id: root
width: Math.max(text.width + 30 + Math.round(text.width) % 2, 128)
height: 42
radius: 21
property alias text: text.text
property color textColor
property color textColorPrime
property alias insideColor: recInside.color
property real insideOpacity
Behavior on opacity {
NumberAnimation {
duration: 500
}
}
function setActive() {
activeAniamtion.start()
}
property bool pushed: false
SequentialAnimation {
id: activeAniamtion
alwaysRunToEnd: true
ScriptAction { script: pushed = true }
PauseAnimation {
duration: 300
}
ScriptAction { script: pushed = false }
}
Rectangle {
id: recInside
width: root.width - 4
height: 38
radius: 19
Behavior on color {
NumberAnimation {
duration: 300
}
}
opacity: pushed ? 1 - insideOpacity : insideOpacity
Behavior on opacity {
NumberAnimation {
duration: 300
}
}
anchors.centerIn: parent
anchors.horizontalCenterOffset: 0
}
Text {
id: text
anchors.centerIn: parent
font.pixelSize: 28
font.family: "Barlow-mono"
color: pushed ? textColorPrime : textColor
}
}