update

example/qml-Qt6/App.qml

@@ -35,7 +35,8 @@ Window {
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.httpInterceptor = interceptor

example/qml-Qt6/global/ItemsFooter.qml

@@ -14,7 +14,8 @@ FluObject{
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onDropped: { FluApp.navigate("/about") }
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
@@ -22,8 +23,10 @@ FluObject{
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 

example/qml-Qt6/global/ItemsOriginal.qml

@@ -21,11 +21,13 @@ FluObject{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
         editDelegate: FluTextBox{
             text:item_home.title
@@ -69,9 +71,11 @@ FluObject{
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
+            url:"qrc:/example/qml/page/T_Buttons.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
@@ -82,46 +86,45 @@ FluObject{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
-            onTap:{
-                item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
-            }
+            url:"qrc:/example/qml/page/T_Text.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -130,33 +133,33 @@ FluObject{
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -168,57 +171,57 @@ FluObject{
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            url:"qrc:/example/qml/page/T_StatusView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -227,9 +230,9 @@ FluObject{
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
@@ -239,6 +242,8 @@ FluObject{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,15 +251,15 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -267,15 +272,15 @@ FluObject{
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
@@ -283,15 +288,15 @@ FluObject{
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
@@ -299,21 +304,21 @@ FluObject{
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
@@ -321,9 +326,9 @@ FluObject{
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -332,27 +337,27 @@ FluObject{
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -366,45 +371,45 @@ FluObject{
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
+            url:"qrc:/example/qml/page/T_Chart.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            url:"qrc:/example/qml/page/T_Http.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
@@ -414,6 +419,8 @@ FluObject{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,9 +428,10 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
+            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 

example/qml-Qt6/window/PageWindow.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import example
+import "qrc:///example/qml/component"
+
+CustomWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource( arg.url,{animDisabled:true})
+        }
+    Loader{
+        id: loader
+        anchors.fill: parent
+    }
+}

example/qml/App.qml

@@ -35,7 +35,8 @@ Window {
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.httpInterceptor = interceptor

example/qml/global/ItemsFooter.qml

@@ -14,7 +14,8 @@ FluObject{
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onDropped: { FluApp.navigate("/about") }
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
@@ -22,8 +23,10 @@ FluObject{
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 

example/qml/global/ItemsOriginal.qml

@@ -21,11 +21,13 @@ FluObject{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
         editDelegate: FluTextBox{
             text:item_home.title
@@ -69,9 +71,11 @@ FluObject{
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
+            url:"qrc:/example/qml/page/T_Buttons.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
@@ -82,46 +86,45 @@ FluObject{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
-            onTap:{
-                item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
-            }
+            url:"qrc:/example/qml/page/T_Text.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -130,33 +133,33 @@ FluObject{
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -168,57 +171,57 @@ FluObject{
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            url:"qrc:/example/qml/page/T_StatusView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -227,9 +230,9 @@ FluObject{
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
@@ -239,6 +242,8 @@ FluObject{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,15 +251,15 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -267,15 +272,15 @@ FluObject{
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
@@ -283,15 +288,15 @@ FluObject{
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
@@ -299,21 +304,21 @@ FluObject{
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
@@ -321,9 +326,9 @@ FluObject{
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -332,27 +337,27 @@ FluObject{
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -366,45 +371,45 @@ FluObject{
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
+            url:"qrc:/example/qml/page/T_Chart.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            url:"qrc:/example/qml/page/T_Http.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
@@ -414,6 +419,8 @@ FluObject{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,9 +428,10 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
+            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 

example/qml/page/T_Acrylic.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Badge.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_BreadcrumbBar.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Buttons.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_CalendarPicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Captcha.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Carousel.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Chart.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_CheckBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_ColorPicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_ComboBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_DatePicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Dialog.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Expander.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_FlipView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Http.qml

@@ -6,6 +6,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.3
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 

example/qml/page/T_Image.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_InfoBar.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Menu.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_MultiWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Pagination.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import "qrc:///example/qml/component"
+import "../component"
 import FluentUI 1.0
 
 FluScrollablePage{

example/qml/page/T_Pivot.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Progress.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_QRCode.qml

@@ -5,6 +5,7 @@ import QtQuick.Window 2.15
 import FluentUI 1.0
 import QtGraphicalEffects 1.15
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_RadioButton.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_RatingControl.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 

example/qml/page/T_Rectangle.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_RemoteLoader.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluPage{
     launchMode: FluPageType.SingleTop

example/qml/page/T_Screenshot.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Settings.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/global"
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Slider.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import "qrc:///example/qml/component"
+import "../component"
 import FluentUI 1.0
 
 FluScrollablePage{

example/qml/page/T_StatusView.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TabView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TableView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 

example/qml/page/T_Text.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Theme.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TimePicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Timeline.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_ToggleSwitch.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Tooltip.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Tour.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TreeView.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 

example/qml/page/T_Watermark.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 

example/qml/window/AboutWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/HotloadWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import example 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/LoginWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/MainWindow.qml

@@ -6,6 +6,7 @@ import Qt.labs.platform 1.1
 import FluentUI 1.0
 import example 1.0
 import "qrc:///example/qml/component"
+import "../component"
 import "qrc:///example/qml/global"
 
 CustomWindow {

example/qml/window/PageWindow.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import example 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+CustomWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource( arg.url,{animDisabled:true})
+        }
+    Loader{
+        id: loader
+        anchors.fill: parent
+    }
+}

example/qml/window/SingleInstanceWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/SingleTaskWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/StandardWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/resource.qrc

@@ -184,5 +184,6 @@
         <file>qml/window/StandardWindow.qml</file>
         <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
+        <file>qml/window/PageWindow.qml</file>
     </qresource>
 </RCC>

example/src/main.cpp

@@ -36,7 +36,7 @@ int main(int argc, char *argv[])
     FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow);
 #ifdef Q_OS_WIN // 此设置仅在Windows下生效
     FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
-    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,false);
+    FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow,true);
 #endif
 #ifdef Q_OS_MACOS
     FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false);

src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml

@@ -170,7 +170,8 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     acceptedButtons: Qt.RightButton
-                    onClicked: function(mouse){
+                    onClicked:
+                        (mouse) =>{
                             if (mouse.button === Qt.RightButton) {
                                 if(model.menuDelegate){
                                     loader_item_menu.sourceComponent = model.menuDelegate
@@ -180,7 +181,6 @@ Item {
                         }
                     z:-100
                 }
-
                 onClicked: {
                     if(d.isCompactAndNotPanel){
                         control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
@@ -393,34 +393,59 @@ Item {
             }
             width: layout_list.width
             FluControl{
+                property var modelData: model
                 id:item_control
-                anchors{
-                    top: parent.top
-                    bottom: parent.bottom
-                    left: parent.left
-                    right: parent.right
-                    topMargin: 2
-                    bottomMargin: 2
-                    leftMargin: 6
-                    rightMargin: 6
+                width: layout_list.width - 12
+                height: 34
+                x:6
+                y:2
+                Drag.active: item_mouse.drag.active
+                Drag.hotSpot.x: item_control.width / 2
+                Drag.hotSpot.y: item_control.height / 2
+                Drag.dragType: Drag.Automatic
+                states: [
+                    State {
+                        when: item_mouse.drag.active
+                        ParentChange {
+                            target: item_control
+                            parent: control
                         }
+                        AnchorChanges {
+                            target: item_control
+                            anchors {
+                                horizontalCenter: undefined
+                                verticalCenter: undefined
+                            }
+                        }
+                    }
+                ]
                 MouseArea{
+                    id:item_mouse
                     anchors.fill: parent
-                    acceptedButtons:  Qt.RightButton
-                    onClicked: function(mouse){
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    drag.target: item_control
+                    onPositionChanged: {
+                        parent.grabToImage(function(result) {
+                            parent.Drag.imageSource = result.url;
+                        })
+                    }
+                    drag.onActiveChanged:
+                        if (active) {
+                            parent.grabToImage(function(result) {
+                                parent.Drag.imageSource = result.url;
+                            })
+                        }
+                    onClicked:
+                        (mouse)=>{
                             if (mouse.button === Qt.RightButton) {
                                 if(model.menuDelegate){
                                     loader_item_menu.sourceComponent = model.menuDelegate
                                     loader_item_menu.item.popup();
                                 }
-                        }
-                    }
-                    z:-100
-                }
-                onClicked: {
+                            }else{
                                 if(type === 0){
-                        if(model.tapFunc){
-                            model.tapFunc()
+                                    if(model.onTapListener){
+                                        model.onTapListener()
                                     }else{
                                         nav_list.currentIndex = _idx
                                         layout_footer.currentIndex = -1
@@ -430,8 +455,8 @@ Item {
                                         }
                                     }
                                 }else{
-                        if(model.tapFunc){
-                            model.tapFunc()
+                                    if(model.onTapListener){
+                                        model.onTapListener()
                                     }else{
                                         nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
                                         layout_footer.currentIndex = _idx
@@ -442,6 +467,8 @@ Item {
                                     }
                                 }
                             }
+                        }
+                }
                 Rectangle{
                     radius: 4
                     anchors.fill: parent
@@ -518,7 +545,7 @@ Item {
                         }
                         elide: Text.ElideRight
                         color:{
-                            if(item_control.pressed){
+                            if(item_mouse.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
                             }
                             return FluTheme.dark ? FluColors.White : FluColors.Grey220
@@ -745,7 +772,13 @@ Item {
             }
         }
     }
-
+    DropArea{
+        anchors.fill: loader_content
+        onDropped:
+            (drag)=>{
+                drag.source.modelData.dropped(drag)
+            }
+    }
     Loader{
         id:loader_content
         anchors{
@@ -880,6 +913,12 @@ Item {
             ListView{
                 id:nav_list
                 clip: true
+                displaced: Transition {
+                    NumberAnimation {
+                        properties: "x,y"
+                        easing.type: Easing.OutQuad
+                    }
+                }
                 anchors.fill: parent
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
@@ -899,7 +938,6 @@ Item {
                     }
                 }
                 currentIndex: -1
-
                 delegate: Loader{
                     property var model: modelData
                     property var _idx: index
@@ -1051,8 +1089,8 @@ Item {
                         }
                     }
                     onClicked: {
-                        if(modelData.tapFunc){
-                            modelData.tapFunc()
+                        if(modelData.onTapListener){
+                            modelData.onTapListener()
                         }else{
                             modelData.tap()
                             nav_list.currentIndex = _idx

src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml

@@ -9,6 +9,7 @@ QtObject {
     property string title
     property int order : 0
     property int icon
+    property var url
     property Component cusIcon
     property Component infoBadge
     property bool recentlyAdded: false
@@ -18,8 +19,9 @@ QtObject {
     property var parent
     property int count: 0
     signal tap
-    property var tapFunc
+    property var onTapListener
     property Component menuDelegate
     property Component editDelegate
     property bool showEdit
+    signal dropped(var drag)
 }

src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml

@@ -171,7 +171,8 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     acceptedButtons: Qt.RightButton
-                    onClicked: function(mouse){
+                    onClicked:
+                        (mouse) =>{
                             if (mouse.button === Qt.RightButton) {
                                 if(model.menuDelegate){
                                     loader_item_menu.sourceComponent = model.menuDelegate
@@ -181,7 +182,6 @@ Item {
                         }
                     z:-100
                 }
-
                 onClicked: {
                     if(d.isCompactAndNotPanel){
                         control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
@@ -394,34 +394,59 @@ Item {
             }
             width: layout_list.width
             FluControl{
+                property var modelData: model
                 id:item_control
-                anchors{
-                    top: parent.top
-                    bottom: parent.bottom
-                    left: parent.left
-                    right: parent.right
-                    topMargin: 2
-                    bottomMargin: 2
-                    leftMargin: 6
-                    rightMargin: 6
+                width: layout_list.width - 12
+                height: 34
+                x:6
+                y:2
+                Drag.active: item_mouse.drag.active
+                Drag.hotSpot.x: item_control.width / 2
+                Drag.hotSpot.y: item_control.height / 2
+                Drag.dragType: Drag.Automatic
+                states: [
+                    State {
+                        when: item_mouse.drag.active
+                        ParentChange {
+                            target: item_control
+                            parent: control
                         }
+                        AnchorChanges {
+                            target: item_control
+                            anchors {
+                                horizontalCenter: undefined
+                                verticalCenter: undefined
+                            }
+                        }
+                    }
+                ]
                 MouseArea{
+                    id:item_mouse
                     anchors.fill: parent
-                    acceptedButtons:  Qt.RightButton
-                    onClicked: function(mouse){
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    drag.target: item_control
+                    onPositionChanged: {
+                        parent.grabToImage(function(result) {
+                            parent.Drag.imageSource = result.url;
+                        })
+                    }
+                    drag.onActiveChanged:
+                        if (active) {
+                            parent.grabToImage(function(result) {
+                                parent.Drag.imageSource = result.url;
+                            })
+                        }
+                    onClicked:
+                        (mouse)=>{
                             if (mouse.button === Qt.RightButton) {
                                 if(model.menuDelegate){
                                     loader_item_menu.sourceComponent = model.menuDelegate
                                     loader_item_menu.item.popup();
                                 }
-                        }
-                    }
-                    z:-100
-                }
-                onClicked: {
+                            }else{
                                 if(type === 0){
-                        if(model.tapFunc){
-                            model.tapFunc()
+                                    if(model.onTapListener){
+                                        model.onTapListener()
                                     }else{
                                         nav_list.currentIndex = _idx
                                         layout_footer.currentIndex = -1
@@ -431,8 +456,8 @@ Item {
                                         }
                                     }
                                 }else{
-                        if(model.tapFunc){
-                            model.tapFunc()
+                                    if(model.onTapListener){
+                                        model.onTapListener()
                                     }else{
                                         nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
                                         layout_footer.currentIndex = _idx
@@ -443,6 +468,8 @@ Item {
                                     }
                                 }
                             }
+                        }
+                }
                 Rectangle{
                     radius: 4
                     anchors.fill: parent
@@ -519,7 +546,7 @@ Item {
                         }
                         elide: Text.ElideRight
                         color:{
-                            if(item_control.pressed){
+                            if(item_mouse.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
                             }
                             return FluTheme.dark ? FluColors.White : FluColors.Grey220
@@ -736,7 +763,7 @@ Item {
                 id:nav_stack2
                 anchors.fill: nav_stack
                 clip: true
-                visible: nav_stack.currentItem?.launchMode === FluPageType.SingleInstance
+                visible: FluPageType.SingleInstance === nav_stack.currentItem.launchMode
             }
             function navStack(){
                 return nav_stack
@@ -746,7 +773,13 @@ Item {
             }
         }
     }
-
+    DropArea{
+        anchors.fill: loader_content
+        onDropped:
+            (drag)=>{
+                drag.source.modelData.dropped(drag)
+            }
+    }
     Loader{
         id:loader_content
         anchors{
@@ -881,6 +914,12 @@ Item {
             ListView{
                 id:nav_list
                 clip: true
+                displaced: Transition {
+                    NumberAnimation {
+                        properties: "x,y"
+                        easing.type: Easing.OutQuad
+                    }
+                }
                 anchors.fill: parent
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
@@ -900,7 +939,6 @@ Item {
                     }
                 }
                 currentIndex: -1
-
                 delegate: Loader{
                     property var model: modelData
                     property var _idx: index
@@ -1052,8 +1090,8 @@ Item {
                         }
                     }
                     onClicked: {
-                        if(modelData.tapFunc){
-                            modelData.tapFunc()
+                        if(modelData.onTapListener){
+                            modelData.onTapListener()
                         }else{
                             modelData.tap()
                             nav_list.currentIndex = _idx

src/Qt6/imports/FluentUI/Controls/FluPaneItem.qml

@@ -9,6 +9,7 @@ QtObject {
     property string title
     property int order : 0
     property int icon
+    property var url
     property Component cusIcon
     property Component infoBadge
     property bool recentlyAdded: false
@@ -18,8 +19,9 @@ QtObject {
     property var parent
     property int count: 0
     signal tap
-    property var tapFunc
+    property var onTapListener
     property Component menuDelegate
     property Component editDelegate
     property bool showEdit
+    signal dropped(var drag)
 }