Simple layout with tabs

.gitignore

@@ -83,9 +83,11 @@ fabric.properties
 ### PyCharm Patch ###
 # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
 
-# *.iml
-# modules.xml
-# .idea/misc.xml
+.idea/*.iml
+.idea/modules.xml
+.idea/misc.xml
+.idea/inspectionProfiles/profiles_settings.xml
+.idea/vcs.xml
 # *.ipr
 
 # Sonarlint plugin

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

qml/components/Button.qml

+import QtQuick
+
+Rectangle {
+    id: rectangle
+    width: 150
+    height: 50
+    radius: 5
+    color: "#ffffff"
+
+    Text {
+        id: text1
+        text: qsTr("Text")
+        anchors.fill: parent
+        font.pixelSize: 12
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+}

qml/components/Tabs.qml

+import QtQuick
+
+Rectangle {
+    id: tabs
+    x: 0
+    y: 0
+    width: 640
+    height: 480
+    color: "#ffffff"
+
+    Grid {
+        id: grid
+        y: 60
+        height: 420
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 0
+        anchors.leftMargin: 0
+        anchors.bottomMargin: 0
+    }
+
+    Rectangle {
+        id: tabsBar
+        height: 60
+        color: "#4a4a4a"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.leftMargin: 0
+        anchors.rightMargin: 0
+
+        Row {
+            id: row
+            height: 60
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            spacing: 5
+            padding: 0
+            rightPadding: 5
+            leftPadding: 5
+            bottomPadding: 5
+            topPadding: 5
+
+            Button {
+                id: button1
+            }
+
+            Button {
+                id: button2
+            }
+
+            Button {
+                id: button3
+            }
+        }
+    }
+}

qml/qml.qml

 import QtQuick
 // import QtQuick.VirtualKeyboard
 
+// Import all components from folder
+import "scenes"
+
 Window {
     id: window
     width: 640
     height: 480
     visible: true
-    title: qsTr("Hello World")
+    title: qsTr("Launcher")
+
+    HomeScene {
+        id: grid
+        anchors.fill: parent
+    }
 
-    /* InputPanel {
+    /* InputPanelHomeScene {
         id: inputPanel
         z: 99
         x: 0
         y: window.height
         width: window.width
 
-        states: State {
+        states: StateHomeScene {
             name: "visible"
             when: inputPanel.active
-            PropertyChanges {
+            PropertyChangesHomeScene {
                 target: inputPanel
                 y: window.height - inputPanel.height
             }
         }
-        transitions: Transition {
+        transitions: TransitionHomeScene {
             from: ""
             to: "visible"
             reversible: true
-            ParallelAnimation {
-                NumberAnimation {
+            ParallelAnimationHomeScene {
+                NumberAnimationHomeScene {
                     properties: "y"
                     duration: 250
                     easing.type: Easing.InOutQuad

qml/qml.qmlproject

@@ -17,4 +17,6 @@ Project {
     }
     /* List of plugin directories passed to QML runtime */
     // importPaths: [ "asset_imports" ]
+
+    mainUiFile: "qml.qml"
 }

qml/scenes/HomeScene.qml

+import QtQuick
+
+import "../components"
+
+Rectangle {
+    id: container
+    x: 0
+    y: 0
+    width: 640
+    height: 480
+
+    Rectangle {
+        id: rectangle
+        height: 50
+        color: "#2b2b2b"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: 0
+        anchors.leftMargin: 0
+        anchors.topMargin: 0
+    }
+
+    Tabs {
+        id: tabs
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.topMargin: 48
+        anchors.bottomMargin: 0
+        anchors.leftMargin: 0
+        anchors.rightMargin: 0
+    }
+}