C

Qt Quick Ultralite Automotive Cluster Demo

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import QtQuickUltralite.Extras 2.0
import Automotive 1.0

Row {
    signal clicked(int index);
    property int currentIndex;
    id: menu;
    Repeater {
        model: ListModel {
            ListElement { text: "Play"; image: "images/play.png"}
            ListElement { text: "Navi"; image: "images/navi.png"}
            ListElement { text: "Phone"; image: "images/phone.png"}
            ListElement { text: "Setup"; image: "images/setup.png"}
        }
        delegate: Item {
            width: 47;
            height: 38;
            property bool active: index == currentIndex;
            ColorizedImage {
                color: parent.active ? Style.lightPeriwinkle : "#001b4d";
                Behavior on color { ColorAnimation { duration: 600; easing.type: Easing.InCubic } }
                source: model.image;
                anchors.horizontalCenter: parent.horizontalCenter;
            }
            Text {
                text: model.text;
                anchors.bottom: parent.bottom;
                anchors.horizontalCenter: parent.horizontalCenter;
                opacity: parent.active ? 1 : 0;
                Behavior on opacity { NumberAnimation { duration: 600; easing.type: Easing.InCubic } }
                font.pixelSize: 12;
                font.family: "Sarabun";
                color: Style.lightPeriwinkle;
            }
        }
    }
}