update

example/page/MainPage.qml

@@ -8,7 +8,7 @@ import FluentUI 1.0
 
 FluWindow {
     id:rootwindow
-    width: 860
+    width: 1000
     height: 640
     title: "FluentUI"
     minimumWidth: 520
@@ -17,11 +17,20 @@ FluWindow {
     FluAppBar{
         id:appbar
         z:10
+        showDark: true
     }
 
     FluObject{
         id:original_items
 
+        FluPaneItem{
+            title:"Home"
+            icon:FluentIcons.Home
+            onTap:{
+                nav_view.push("qrc:/T_Home.qml")
+            }
+        }
+
         FluPaneItemHeader{
             title:"Inputs"
         }
@@ -245,11 +254,9 @@ FluWindow {
         logo: "qrc:/res/image/favicon.ico"
         z: 11
         Component.onCompleted: {
-            nav_view.setCurrentIndex(1)
-            nav_view.push("qrc:/T_Buttons.qml")
-        }
-
-
+            nav_view.setCurrentIndex(0)
+            nav_view.push("qrc:/T_Home.qml")
+        }
     }
 
 

example/qml.qrc

@@ -47,5 +47,8 @@
         <file>T_MediaPlayer.qml</file>
         <file>T_TabView.qml</file>
         <file>res/image/favicon.ico</file>
+        <file>T_Home.qml</file>
+        <file>res/image/bg_home_header.png</file>
+        <file>res/image/ic_home_github.png</file>
     </qresource>
 </RCC>

src/controls/FluAppBar.qml

@@ -69,13 +69,13 @@ Rectangle{
 
         RowLayout{
             Layout.alignment: Qt.AlignVCenter
-            Layout.rightMargin: 14
+            Layout.rightMargin: 5
             visible: showDark
             spacing: 5
             FluText{
                 text:"夜间模式"
                 color:root.textColor
-                fontStyle: FluText.Body
+                fontStyle: FluText.Caption
             }
             FluToggleSwitch{
                 selected: FluTheme.isDark

src/controls/FluAutoSuggestBox.qml

@@ -148,6 +148,12 @@ TextField{
                 to:input_popup.y
                 duration: 150
             }
+            NumberAnimation {
+                property: "opacity"
+                from:0
+                to:1
+                duration: 150
+            }
         }
         onClosed: {
             input.focus = false

src/controls/FluCalendarPicker.qml

@@ -72,6 +72,12 @@ Rectangle {
                 to:popup.y
                 duration: 150
             }
+            NumberAnimation {
+                property: "opacity"
+                from:0
+                to:1
+                duration: 150
+            }
         }
         background: FluCalendarView{
             id:container

src/controls/FluColorPicker.qml

@@ -43,6 +43,12 @@ Button{
                 to:popup.y
                 duration: 150
             }
+            NumberAnimation {
+                property: "opacity"
+                from:0
+                to:1
+                duration: 150
+            }
         }
         contentItem: Item{}
         function showPopup() {

src/controls/FluDatePicker.qml

@@ -111,6 +111,12 @@ Rectangle {
                 to:popup.y
                 duration: 150
             }
+            NumberAnimation {
+                property: "opacity"
+                from:0
+                to:1
+                duration: 150
+            }
         }
         background: Rectangle{
             id:container

src/controls/FluDropDownButton.qml

@@ -83,6 +83,7 @@ Button {
     FluMenu{
         id:menu
         width: control.width
+        animEnabled: true
     }
 
 }

src/controls/FluMenu.qml

@@ -5,7 +5,7 @@ import QtQuick.Controls 2.15
 Menu {
 
     default property alias content: container.data
-
+    property bool animEnabled: false
     id: popup
     width: 140
     height: container.height
@@ -18,7 +18,13 @@ Menu {
             property: "y"
             from:0
             to:popup.y
-            duration: 150
+            duration: animEnabled ? 150 : 0
+        }
+        NumberAnimation {
+            property: "opacity"
+            from:0
+            to:1
+            duration: animEnabled ? 150 : 0
         }
     }
 

src/controls/FluNavigationView.qml

@@ -132,12 +132,30 @@ Item {
                     }
                 }
 
-                FluText{
-                    text:model.title
+                FluIcon{
+                    id:item_icon
+                    iconSource: {
+                        if(model.icon){
+                            return model.icon
+                        }
+                        return 0
+                    }
+                    width: 30
+                    height: 30
+                    iconSize: 15
                     anchors{
                         verticalCenter: parent.verticalCenter
                         left:parent.left
-                        leftMargin: 14
+                        leftMargin: 3
+                    }
+                }
+
+                FluText{
+                    id:item_title
+                    text:model.title
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        left:item_icon.right
                     }
                 }
             }
@@ -326,6 +344,7 @@ Item {
             clip: true
             anchors{
                 top: layout_header.bottom
+                topMargin: 6
                 left: parent.left
                 right: parent.right
                 bottom: layout_footer.top

src/controls/FluPaneItem.qml

@@ -2,6 +2,7 @@
 
 QtObject {
     property string title
+    property var icon
     signal tap
     signal repTap
 }

src/controls/FluScrollablePage.qml

@@ -19,6 +19,8 @@ Item {
     FluText{
         id:text_title
         fontStyle: FluText.TitleLarge
+        visible: text !== ""
+        height: visible?implicitHeight:0
         anchors{
             top: parent.top
             topMargin: control.topPadding

src/controls/FluTimePicker.qml

@@ -107,6 +107,12 @@ Rectangle {
         modal: true
         dim:false
         enter: Transition {
+            NumberAnimation {
+                property: "opacity"
+                from:0
+                to:1
+                duration: 150
+            }
             NumberAnimation {
                 property: "y"
                 from:0