add styled tab view

components/TabView/StyledTab.qml

@@ -0,0 +1,7 @@
+import QtQuick
+
+Item {
+    property string title
+    property string icon
+    default property Component content
+}

components/TabView/StyledTabView.qml

@@ -0,0 +1,65 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+
+    default property list<StyledTab> tabs
+
+    anchors.fill: parent
+
+    Container {
+        id: tabs
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+
+        implicitHeight: 30
+
+        anchors.bottom: view.top
+        anchors.right: parent.right
+
+        contentItem: ListView {
+            model: tabs.contentModel
+            snapMode: ListView.SnapOneItem
+            orientation: ListView.Horizontal
+        }
+
+        Repeater {
+            model: root.tabs
+            delegate: StyledButton {
+                required property var modelData
+                required property var index
+
+                text: modelData.title
+                onClicked: tabs.setCurrentIndex(index)
+            }
+        }
+    }
+
+    SwipeView {
+        id: view
+
+        orientation: Qt.Horizontal
+
+        currentIndex: tabs.currentIndex
+
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        anchors.top: tabs.bottom
+        anchors.left: parent.left
+
+        Repeater {
+            model: root.tabs
+            Loader {
+                required property var modelData
+                active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
+                sourceComponent: modelData.content
+            }
+        }
+    }
+}

modules/storybook/Navigation.qml

@@ -0,0 +1,26 @@
+import qs.components
+import qs.components.TabView
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    anchors.fill: parent
+
+    StyledTabView {
+        StyledTab {
+            title: 'Red Tab'
+            Rectangle {
+                color: 'red'
+                anchors.fill: parent
+            }
+        }
+        StyledTab {
+            title: 'Blue Tab'
+            Rectangle {
+                color: 'blue'
+                anchors.fill: parent
+            }
+        }
+    }
+}

modules/storybook/Storybook.qml

@@ -40,6 +40,11 @@ StyledPanelWindow {
             text: "Components"
             onClicked: tabs.setCurrentIndex(2)
         }
+
+        StyledTabButton {
+            text: "Navigation"
+            onClicked: tabs.setCurrentIndex(3)
+        }
     }
 
     SwipeView {
@@ -69,5 +74,9 @@ StyledPanelWindow {
             padding: 36
             Components {}
         }
+        ScrollView {
+            padding: 36
+            Navigation {}
+        }
     }
 }