update

example/T_Pivot.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+
+FluScrollablePage{
+
+    title:"Pivot"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 400
+        paddings: 10
+
+        FluPivot{
+            anchors.fill: parent
+            FluPivotItem{
+                title:"All"
+                contentItem:FluText{
+                    text:"All emails go here."
+                }
+            }
+            FluPivotItem{
+                title:"Unread"
+                contentItem:FluText{
+                    text:"Unread emails go here."
+                }
+            }
+            FluPivotItem{
+                title:"Flagged"
+                contentItem:FluText{
+                    text:"Flagged emails go here."
+                }
+            }
+            FluPivotItem{
+                title:"Urgent"
+                contentItem:FluText{
+                    text:"Urgent emails go here."
+                }
+            }
+        }
+    }
+
+
+}

example/global/ItemsOriginal.qml

@@ -172,6 +172,17 @@ FluObject{
     FluPaneItemExpander{
         title:"Navigation"
         icon:FluentIcons.AllApps
+
+        FluPaneItem{
+            title:"Pivot"
+            image:"qrc:/res/image/control/Pivot.png"
+            recentlyAdded:true
+            order:3
+            desc:"Presents information from different sources in atabbed view."
+            onTap:{
+                navigationView.push("qrc:/T_Pivot.qml")
+            }
+        }
         FluPaneItem{
             title:"TabView"
             image:"qrc:/res/image/control/TabView.png"

example/qml.qrc

@@ -154,5 +154,6 @@
         <file>global/ItemsFooter.qml</file>
         <file>page/MediaPage.qml</file>
         <file>T_FlipView.qml</file>
+        <file>T_Pivot.qml</file>
     </qresource>
 </RCC>

src/Fluent.cpp

@@ -33,6 +33,8 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
     qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
 
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivotItem.qml"),uri,major,minor,"FluPivotItem");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivot.qml"),uri,major,minor,"FluPivot");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");

src/controls/FluMediaPlayer.qml

@@ -121,7 +121,6 @@ Rectangle {
             text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
         }
 
-
         FluText{
             id:end_time
             anchors{
@@ -132,7 +131,6 @@ Rectangle {
             text: formatDuration(mediaplayer.duration)
         }
 
-
         Row{
             spacing: 10
             anchors{

src/controls/FluNavigationView.qml

@@ -227,16 +227,6 @@ Item {
                     leftMargin: 6
                     rightMargin: 6
                 }
-                Rectangle{
-                    width: 3
-                    height: 18
-                    radius: 1.5
-                    color: FluTheme.primaryColor.dark
-                    visible: nav_list.currentIndex === position && type===0
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                    }
-                }
                 MouseArea{
                     id:item_mouse
                     hoverEnabled: true
@@ -468,8 +458,21 @@ Item {
                     stackIndex.push(currentIndex)
                 }
             }
+            highlight: Item{
+                clip: true
+                Rectangle{
+                    height: 18
+                    radius: 1.5
+                    color: FluTheme.primaryColor.dark
+                    width: 3
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                        leftMargin: 6
+                    }
+                }
+            }
             ScrollBar.vertical: FluScrollBar {}
-
             model:handleItems()
             delegate: Loader{
                 property var model: modelData

src/controls/FluPivot.qml

@@ -0,0 +1,104 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item {
+
+
+    id:control
+    default property alias content: d.children
+    property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
+    property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
+
+
+    width: 400
+    height: 300
+
+    FluObject{
+        id:d
+    }
+
+    Component.onCompleted: {
+        for(var i =0 ;i <d.children.length;i++){
+            console.debug(d.children[i].title)
+        }
+    }
+
+    ListView{
+        id:nav_list
+        height: 40
+        width: control.width
+        model:d.children
+        clip: true
+        spacing: 20
+        interactive: false
+        orientation:ListView.Horizontal
+        highlight: Item{
+            clip: true
+            Rectangle{
+                height: 3
+                radius: 1.5
+                color: FluTheme.primaryColor.dark
+                width: nav_list.currentItem ? nav_list.currentItem.width : 0
+                y:37
+                Behavior on width {
+                    NumberAnimation{
+                        duration: 150
+                    }
+                }
+            }
+        }
+        delegate: Button{
+            id:item_button
+            width: item_title.width
+            height: nav_list.height
+            background:Item{
+            }
+            contentItem: Item{
+                FluText {
+                    id:item_title
+                    fontStyle: FluText.Title
+                    font.bold: false
+                    text: modelData.title
+                    anchors.centerIn: parent
+                    color: {
+                        if(item_button.hovered)
+                            return hoverColor
+                        return normalColor
+                    }
+                }
+                transitions: Transition {
+                    NumberAnimation{
+                        duration: 400;
+                    }
+                }
+            }
+            onClicked: {
+                nav_list.currentIndex = index
+            }
+        }
+    }
+
+    Item{
+        id:container
+        anchors{
+            top: nav_list.bottom
+            topMargin: 10
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        Repeater{
+            model:d.children
+            Loader{
+                property var argument: modelData.argument
+                anchors.fill: parent
+                sourceComponent: modelData.contentItem
+                visible: nav_list.currentIndex === index
+            }
+        }
+    }
+
+
+}

src/controls/FluPivotItem.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import FluentUI
+
+QtObject {
+    property string title
+    property Component contentItem
+    property var argument
+}

src/res.qrc

@@ -62,5 +62,7 @@
         <file>controls/FluTextBoxMenu.qml</file>
         <file>controls/FluMultilineTextBox.qml</file>
         <file>controls/FluFlipView.qml</file>
+        <file>controls/FluPivot.qml</file>
+        <file>controls/FluPivotItem.qml</file>
     </qresource>
 </RCC>