QtQuick.Controls used for Button template, tabs switching with simple template, UI constants

qml/components/Button.qml

 import QtQuick
+import QtQuick.Controls as C
 
-Rectangle {
-    id: rectangle
+C.Button {
+
+    // control.down
+    // control.activeFocus
+
+    id: control
     width: 150
     height: 50
-    radius: 5
-    color: "#ffffff"
+    text: qsTr("Button")
 
-    Text {
-        id: text1
-        text: qsTr("Text")
-        anchors.fill: parent
-        font.pixelSize: 12
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: control.down ? "#000000" : (control.activeFocus ? "#ff0000" : "#555555")
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.color: control.down ? "#000000" : (control.activeFocus ? "#ff0000" : "#555555")
+        border.width: 1
+        radius: 8
     }
 }

qml/components/Tabs.qml

 import QtQuick
+import "../constants/tabs.js" as TabConstants
 
 Rectangle {
+    // PROPERTIES
+    property string currentTab: TabConstants.systemManagementTab
+
+    // FIELDS
     id: tabs
     x: 0
     y: 0
@@ -8,16 +13,52 @@ Rectangle {
     height: 480
     color: "#ffffff"
 
+    // COMPONENTS
+
     Grid {
-        id: grid
-        y: 60
-        height: 420
+        id: systemManagementGrid
+        visible: tabs.currentTab == TabConstants.systemManagementTab
+
+        columns: 3
+        spacing: 2
+
         anchors.left: parent.left
         anchors.right: parent.right
+        anchors.top: parent.top
         anchors.bottom: parent.bottom
+        anchors.topMargin: 60
         anchors.rightMargin: 0
         anchors.leftMargin: 0
         anchors.bottomMargin: 0
+
+        Rectangle { color: "red"; width: 50; height: 50 }
+        Rectangle { color: "green"; width: 20; height: 50 }
+        Rectangle { color: "blue"; width: 50; height: 20 }
+        Rectangle { color: "cyan"; width: 50; height: 50 }
+        Rectangle { color: "magenta"; width: 10; height: 10 }
+    }
+
+    Grid {
+        id: gamesGrid
+        visible: tabs.currentTab == TabConstants.gamesTab
+
+        columns: 3
+        spacing: 2
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.topMargin: 60
+        anchors.rightMargin: 0
+        anchors.leftMargin: 0
+        anchors.bottomMargin: 0
+
+        Text {
+            id: text2
+            text: qsTr("Text")
+            font.pixelSize: 12
+        }
     }
 
     Rectangle {
@@ -45,16 +86,26 @@ Rectangle {
             topPadding: 5
 
             Button {
-                id: button1
-            }
-
-            Button {
-                id: button2
+                id: buttonSystemManagement
+                text: "System management"
+                onClicked: function(){
+                    tabs.currentTab = TabConstants.systemManagementTab;
+                    // tabs.changeTab();
+                    // console.log(tabs.currentTab);
+                }
             }
 
             Button {
-                id: button3
+                id: buttonGames
+                text: "Games"
+                onClicked: function(){
+                    tabs.currentTab = TabConstants.gamesTab;
+                    // tabs.changeTab();
+                    // console.log(tabs.currentTab);
+                }
             }
         }
     }
+
+
 }

qml/constants/style.js

+var backColor = "red";
\ No newline at end of file

qml/constants/tabs.js

+var systemManagementTab = "systemManagement";
+var gamesTab = "games";
\ No newline at end of file

qml/scenes/HomeScene.qml

 import QtQuick
+import QtQuick.Controls
 
 import "../components"