RibbonTour and exmaple: Add RibbonTourItem for convenient use and add titleBar icon switch for example's settings.

example/qml/Qt5/about.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.15
 import RibbonUI 1.0
 
 RibbonWindow {

example/qml/Qt5/example.qml

@@ -13,81 +13,79 @@ RibbonWindow {
     property bool modernStyle: RibbonTheme.modernStyle
     RibbonTour{
         id: tour
-        targetList: [
-            {
-                title: qsTr("Tab Bar"),
-                text: qsTr("A tab bar for window, let user choose the controllers."),
-                target: tab_bar,
-                enter_func: ()=>{
-                    tab_bar.folded = false
-                    tour.refresh(300) // Use it if has animation
-                }
-            },
-            {
-                title: qsTr("Tab Bar Buttons"),
-                text: qsTr("Tool buttons at the top of tab bar."),
-                target: tab_bar_tool
-            },
-            {
-                title: qsTr("Sliders"),
-                text: qsTr("Vertical/Horizental sliders with/without buttons."),
-                target: slider_layout,
-                enter_func: ()=>{
-                    tab_bar.setPage(0)
-                    slider_with_btn.value = 70
-                    slider_without_btn.value = 70
-                    tour.refresh(500)
-                },
-                exit_func: ()=>{
-                    slider_with_btn.value = 50
-                    slider_without_btn.value = 50
-                }
-            },
-            {
-                title: qsTr("Switch Buttons"),
-                text: qsTr("Switch buttons with/without background color or grabber text."),
-                target: switch_layout,
-                enter_func: ()=>btn_with_color_and_grabberText.checked = true,
-                exit_func: ()=>btn_with_color_and_grabberText.checked = false
-            },
-            {
-                title: qsTr("CheckBoxs"),
-                text: qsTr("CheckBoxs with colorful background or with/without label text."),
-                target: checkbox_layout
-            },
-            {
-                title: qsTr("Buttons"),
-                text: qsTr("Buttons with/without background or label text."),
-                target: button_layout,
-                enter_func: ()=>btn_without_bg_and_label.checked = true,
-                exit_func: ()=>btn_without_bg_and_label.checked = false
-            },
-            {
-                title: qsTr("Push Buttons"),
-                text: qsTr("Push buttons with/without sub menu."),
-                target: pushbutton_layout
-            },
-            {
-                title: qsTr("Line Edits"),
-                text: qsTr("Line edits with/without icon."),
-                target: lineedit_layout,
-                enter_func: ()=>{
-                    tab_bar.setPage(1)
-                    lineedit_with_icon.text = "Line Edit with icon."
-                    tour.refresh(300)
-                },
-                exit_func: ()=>{
-                    tab_bar.setPage(0)
-                    lineedit_with_icon.clear()
-                    tour.refresh(400)
-                }
-            },
-            {
-                title: qsTr("Bottom Bar"),
-                text: qsTr("A bottom bar for window."),
-                target: bottom_bar
-            },
-        ]
+        RibbonTourItem{
+            title: qsTr("Tab Bar")
+            text: qsTr("A tab bar for window, let user choose the controllers.")
+            target: tab_bar
+            enterFunc: ()=>{
+                tab_bar.folded = false
+                tour.refresh(300) // Use it if has animation
+            }
+        }
+        RibbonTourItem{
+            title: qsTr("Tab Bar Buttons")
+            text: qsTr("Tool buttons at the top of tab bar.")
+            target: tab_bar_tool
+        }
+        RibbonTourItem{
+            title: qsTr("Sliders")
+            text: qsTr("Vertical/Horizental sliders with/without buttons.")
+            target: slider_layout
+            enterFunc: ()=>{
+                tab_bar.setPage(0)
+                slider_with_btn.value = 70
+                slider_without_btn.value = 70
+                tour.refresh(500)
+            }
+            exitFunc: ()=>{
+                slider_with_btn.value = 50
+                slider_without_btn.value = 50
+            }
+        }
+        RibbonTourItem{
+            title: qsTr("Switch Buttons")
+            text: qsTr("Switch buttons with/without background color or grabber text.")
+            target: switch_layout
+            enterFunc: ()=>btn_with_color_and_grabberText.checked = true
+            exitFunc: ()=>btn_with_color_and_grabberText.checked = false
+        }
+        RibbonTourItem{
+            title: qsTr("CheckBoxs")
+            text: qsTr("CheckBoxs with colorful background or with/without label text.")
+            target: checkbox_layout
+        }
+        RibbonTourItem{
+            title: qsTr("Buttons")
+            text: qsTr("Buttons with/without background or label text.")
+            target: button_layout
+            enterFunc: ()=>btn_without_bg_and_label.checked = true
+            exitFunc: ()=>btn_without_bg_and_label.checked = false
+        }
+        RibbonTourItem{
+            title: qsTr("Push Buttons")
+            text: qsTr("Push buttons with/without sub menu.")
+            target: pushbutton_layout
+        }
+        RibbonTourItem{
+            title: qsTr("Line Edits")
+            text: qsTr("Line edits with/without icon.")
+            target: lineedit_layout
+            enterFunc: ()=>{
+                tab_bar.setPage(1)
+                lineedit_with_icon.text = "Line Edit with icon."
+                tour.refresh(300)
+            }
+            exitFunc: ()=>{
+                tab_bar.setPage(0)
+                lineedit_with_icon.clear()
+                tour.refresh(400)
+            }
+        }
+        RibbonTourItem{
+            title: qsTr("Bottom Bar")
+            text: qsTr("A bottom bar for window.")
+            target: bottom_bar
+        }
         target: windowItems
         blurEnabled: true
         targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
@@ -652,8 +650,6 @@ RibbonWindow {
     RibbonPaperView{
         id: view
         anchors.fill: parent
-        topPadding: tab_bar.height
-        bottomPadding: bottom_bar.height
         pageWidth: (page_slider.value / 100.0) * width
         spacing: 0
         ColumnLayout{
@@ -866,11 +862,46 @@ RibbonWindow {
         blurEnabled: true
         blurTarget: root.windowItems
         radius: borderRadius
-        pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}},
-            {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}},
-            {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}},
-            {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")},
-            {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))},
-            {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}]
+        RibbonBackStageMenuItem{
+            menuText: "Home"
+            menuIcon: RibbonIcons.Home
+            type: RibbonBackStageView.MenuItemLocation.Head
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"Home"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "File"
+            menuIcon: RibbonIcons.Document
+            type: RibbonBackStageView.MenuItemLocation.Head
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"File"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Search"
+            menuIcon: RibbonIcons.Search
+            type: RibbonBackStageView.MenuItemLocation.Body
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"Search"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Account"
+            menuIcon: RibbonIcons.PersonAccounts
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>console.log("Menu Account clicked")
+        }
+        RibbonBackStageMenuItem{
+            menuText: "About"
+            menuIcon: RibbonIcons.Info
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml"))
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Settings"
+            menuIcon: RibbonIcons.Settings
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml")
+        }
     }
 }

example/qml/Qt5/pages/SettingsMenuPage.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
-import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
 import RibbonUI 1.0
 
 RibbonBackStagePage{
@@ -87,5 +88,25 @@ RibbonBackStagePage{
                 }
             }
         }
+        RibbonBackStageGroup{
+            Layout.alignment: Qt.AlignTop
+            Layout.preferredHeight: render_btn.height + 40
+            Layout.fillWidth: true
+            groupName: qsTr("TitleBar")
+            RowLayout{
+                RibbonText{
+                    text: qsTr("Show TitleBar Icon: ")
+                }
+                RibbonSwitchButton{
+                    text: "Icon"
+                    grabberText: RibbonTheme.nativeText ? "Show" : "Hide"
+                    checked: true
+                    Layout.alignment: Qt.AlignHCenter
+                    onClicked: {
+                        Window.window.titleBar.titleIcon.visible = checked
+                    }
+                }
+            }
+        }
     }
 }

example/qml/Qt6/example.qml

@@ -1,7 +1,7 @@
 import QtQuick
-import QtQuick.Window
-import QtQuick.Layouts
 import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
 import RibbonUI
 
 RibbonWindow {
@@ -13,81 +13,79 @@ RibbonWindow {
     property bool modernStyle: RibbonTheme.modernStyle
     RibbonTour{
         id: tour
-        targetList: [
-            {
-                title: qsTr("Tab Bar"),
-                text: qsTr("A tab bar for window, let user choose the controllers."),
-                target: tab_bar,
-                enter_func: ()=>{
-                    tab_bar.folded = false
-                    tour.refresh(300) // Use it if has animation
-                }
-            },
-            {
-                title: qsTr("Tab Bar Buttons"),
-                text: qsTr("Tool buttons at the top of tab bar."),
-                target: tab_bar_tool
-            },
-            {
-                title: qsTr("Sliders"),
-                text: qsTr("Vertical/Horizental sliders with/without buttons."),
-                target: slider_layout,
-                enter_func: ()=>{
-                    tab_bar.setPage(0)
-                    slider_with_btn.value = 70
-                    slider_without_btn.value = 70
-                    tour.refresh(500)
-                },
-                exit_func: ()=>{
-                    slider_with_btn.value = 50
-                    slider_without_btn.value = 50
-                }
-            },
-            {
-                title: qsTr("Switch Buttons"),
-                text: qsTr("Switch buttons with/without background color or grabber text."),
-                target: switch_layout,
-                enter_func: ()=>btn_with_color_and_grabberText.checked = true,
-                exit_func: ()=>btn_with_color_and_grabberText.checked = false
-            },
-            {
-                title: qsTr("CheckBoxs"),
-                text: qsTr("CheckBoxs with colorful background or with/without label text."),
-                target: checkbox_layout
-            },
-            {
-                title: qsTr("Buttons"),
-                text: qsTr("Buttons with/without background or label text."),
-                target: button_layout,
-                enter_func: ()=>btn_without_bg_and_label.checked = true,
-                exit_func: ()=>btn_without_bg_and_label.checked = false
-            },
-            {
-                title: qsTr("Push Buttons"),
-                text: qsTr("Push buttons with/without sub menu."),
-                target: pushbutton_layout
-            },
-            {
-                title: qsTr("Line Edits"),
-                text: qsTr("Line edits with/without icon."),
-                target: lineedit_layout,
-                enter_func: ()=>{
-                    tab_bar.setPage(1)
-                    lineedit_with_icon.text = "Line Edit with icon."
-                    tour.refresh(300)
-                },
-                exit_func: ()=>{
-                    tab_bar.setPage(0)
-                    lineedit_with_icon.clear()
-                    tour.refresh(400)
-                }
-            },
-            {
-                title: qsTr("Bottom Bar"),
-                text: qsTr("A bottom bar for window."),
-                target: bottom_bar
-            },
-        ]
+        RibbonTourItem{
+            title: qsTr("Tab Bar")
+            text: qsTr("A tab bar for window, let user choose the controllers.")
+            target: tab_bar
+            enterFunc: ()=>{
+                tab_bar.folded = false
+                tour.refresh(300) // Use it if has animation
+            }
+        }
+        RibbonTourItem{
+            title: qsTr("Tab Bar Buttons")
+            text: qsTr("Tool buttons at the top of tab bar.")
+            target: tab_bar_tool
+        }
+        RibbonTourItem{
+            title: qsTr("Sliders")
+            text: qsTr("Vertical/Horizental sliders with/without buttons.")
+            target: slider_layout
+            enterFunc: ()=>{
+                tab_bar.setPage(0)
+                slider_with_btn.value = 70
+                slider_without_btn.value = 70
+                tour.refresh(500)
+            }
+            exitFunc: ()=>{
+                slider_with_btn.value = 50
+                slider_without_btn.value = 50
+            }
+        }
+        RibbonTourItem{
+            title: qsTr("Switch Buttons")
+            text: qsTr("Switch buttons with/without background color or grabber text.")
+            target: switch_layout
+            enterFunc: ()=>btn_with_color_and_grabberText.checked = true
+            exitFunc: ()=>btn_with_color_and_grabberText.checked = false
+        }
+        RibbonTourItem{
+            title: qsTr("CheckBoxs")
+            text: qsTr("CheckBoxs with colorful background or with/without label text.")
+            target: checkbox_layout
+        }
+        RibbonTourItem{
+            title: qsTr("Buttons")
+            text: qsTr("Buttons with/without background or label text.")
+            target: button_layout
+            enterFunc: ()=>btn_without_bg_and_label.checked = true
+            exitFunc: ()=>btn_without_bg_and_label.checked = false
+        }
+        RibbonTourItem{
+            title: qsTr("Push Buttons")
+            text: qsTr("Push buttons with/without sub menu.")
+            target: pushbutton_layout
+        }
+        RibbonTourItem{
+            title: qsTr("Line Edits")
+            text: qsTr("Line edits with/without icon.")
+            target: lineedit_layout
+            enterFunc: ()=>{
+                tab_bar.setPage(1)
+                lineedit_with_icon.text = "Line Edit with icon."
+                tour.refresh(300)
+            }
+            exitFunc: ()=>{
+                tab_bar.setPage(0)
+                lineedit_with_icon.clear()
+                tour.refresh(400)
+            }
+        }
+        RibbonTourItem{
+            title: qsTr("Bottom Bar")
+            text: qsTr("A bottom bar for window.")
+            target: bottom_bar
+        }
         target: windowItems
         blurEnabled: true
         targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
@@ -652,8 +650,6 @@ RibbonWindow {
     RibbonPaperView{
         id: view
         anchors.fill: parent
-        topPadding: tab_bar.height
-        bottomPadding: bottom_bar.height
         pageWidth: (page_slider.value / 100.0) * width
         spacing: 0
         ColumnLayout{
@@ -866,11 +862,46 @@ RibbonWindow {
         blurEnabled: true
         blurTarget: root.windowItems
         radius: borderRadius
-        pageModel: [{"menu_text":"Home", "menu_icon":RibbonIcons.Home, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"Home"}},
-            {"menu_text":"File", "menu_icon":RibbonIcons.Document, "type":RibbonBackStageView.MenuItemLocation.Head, "sourceComponent":t_content, "sourceArgs":{'pageName':"File"}},
-            {"menu_text":"Search", "menu_icon":RibbonIcons.Search, "type":RibbonBackStageView.MenuItemLocation.Body, "sourceComponent":t_content, "sourceArgs":{'pageName':"Search"}},
-            {"menu_text":"Account", "menu_icon":RibbonIcons.PersonAccounts, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>console.log("Menu Account clicked")},
-            {"menu_text":"About", "menu_icon":RibbonIcons.Info, "type":RibbonBackStageView.MenuItemLocation.Tail, "clickOnly":true, "clickFunc": ()=>root.showWindow(Qt.resolvedUrl("about.qml"))},
-            {"menu_text":"Settings", "menu_icon":RibbonIcons.Settings, "type":RibbonBackStageView.MenuItemLocation.Tail, "sourceUrl":Qt.resolvedUrl("pages/SettingsMenuPage.qml")}]
+        RibbonBackStageMenuItem{
+            menuText: "Home"
+            menuIcon: RibbonIcons.Home
+            type: RibbonBackStageView.MenuItemLocation.Head
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"Home"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "File"
+            menuIcon: RibbonIcons.Document
+            type: RibbonBackStageView.MenuItemLocation.Head
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"File"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Search"
+            menuIcon: RibbonIcons.Search
+            type: RibbonBackStageView.MenuItemLocation.Body
+            sourceComponent: t_content
+            sourceArgs:{'pageName':"Search"}
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Account"
+            menuIcon: RibbonIcons.PersonAccounts
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>console.log("Menu Account clicked")
+        }
+        RibbonBackStageMenuItem{
+            menuText: "About"
+            menuIcon: RibbonIcons.Info
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            clickOnly: true
+            clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml"))
+        }
+        RibbonBackStageMenuItem{
+            menuText: "Settings"
+            menuIcon: RibbonIcons.Settings
+            type: RibbonBackStageView.MenuItemLocation.Tail
+            sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml")
+        }
     }
 }

example/qml/Qt6/pages/SettingsMenuPage.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
+import QtQuick.Window
 import RibbonUI
 
 RibbonBackStagePage{
@@ -87,5 +88,25 @@ RibbonBackStagePage{
                 }
             }
         }
+        RibbonBackStageGroup{
+            Layout.alignment: Qt.AlignTop
+            Layout.preferredHeight: render_btn.height + 40
+            Layout.fillWidth: true
+            groupName: qsTr("TitleBar")
+            RowLayout{
+                RibbonText{
+                    text: qsTr("Show TitleBar Icon: ")
+                }
+                RibbonSwitchButton{
+                    text: "Icon"
+                    grabberText: RibbonTheme.nativeText ? "Show" : "Hide"
+                    checked: true
+                    Layout.alignment: Qt.AlignHCenter
+                    onClicked: {
+                        Window.window.titleBar.titleIcon.visible = checked
+                    }
+                }
+            }
+        }
     }
 }

lib_source/CMakeLists.txt

@@ -39,7 +39,8 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml
     RibbonScrollBar.qml RibbonWindow.qml RibbonMessage.qml
     RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
     RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
-    RibbonRadioButton.qml)
+    RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
+    RibbonObject.qml)
 
 set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
 

lib_source/qml/Qt5/RibbonBackStageMenuItem.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.15
+import RibbonUI 1.0
+
+RibbonObject {
+    id: control
+    required property string menuText
+    property var menuIcon
+    property var menuIconFilled
+    required property var type
+    property var sourceComponent
+    property var sourceArgs
+    property bool clickOnly: false
+    property var sourceUrl
+    property var clickFunc
+    property int propertyCount: 0
+    property_names: ['menuText','menuIcon','menuIconFilled','type','sourceComponent','sourceArgs','clickOnly','sourceUrl','clickFunc']
+}

lib_source/qml/Qt5/RibbonBackStageView.qml

@@ -21,7 +21,7 @@ Popup {
     property string backText: qsTr("Back")
     property int radius: 0
     property var pageModel: []
-
+    default property alias data: data_container.data
     signal backBtnClicked()
 
     background: Item{}
@@ -35,11 +35,28 @@ Popup {
         }
     }
 
-    Component.onCompleted: refreshModel()
+    Component.onCompleted: {
+        for(let index = pageModel.length; index < data_container.resources.length; index++)
+        {
+            if(data_container.resources[index] instanceof RibbonBackStageMenuItem)
+            {
+                let item = data_container.resources[index]
+                item.getPropertiesReady()
+                pageModel.push(item.properties)
+            }
+        }
+        if(pageModel.length)
+            pageModelChanged()
+        refreshModel()
+    }
     onPageModelChanged: refreshModel()
     onAboutToShow: show()
     onBackBtnClicked: hide()
 
+    Item{
+        id: data_container
+    }
+
     RibbonBlur{
         id: blur_bg
         anchors.fill: parent
@@ -204,18 +221,18 @@ Popup {
 
                     RibbonIcon{
                         id :rib_icon
-                        iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0
-                        iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource
+                        iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0
+                        iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource
                         iconSize: menu_label.visible ? menu_label.contentHeight : 16
-                        visible: typeof(model.menu_icon) === "number" && model.menu_icon
+                        visible: typeof(model.menuIcon) === "number" && model.menuIcon
                         Layout.alignment: Qt.AlignVCenter
                         filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu
-                        color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor
+                        color: model.menuIconColor ? model.menuIconColor : back_btn.textColor
                     }
                     Image {
                         id: pic_icon
-                        source: typeof(model.menu_icon) === "string" ? model.menu_icon : ""
-                        visible: typeof(model.menu_icon) === "string"
+                        source: typeof(model.menuIcon) === "string" ? model.menuIcon : ""
+                        visible: typeof(model.menuIcon) === "string"
                         fillMode:Image.PreserveAspectFit
                         mipmap: true
                         autoTransform: true
@@ -225,7 +242,7 @@ Popup {
                     }
                     Text{
                         id: menu_label
-                        text: model.menu_text
+                        text: model.menuText
                         color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
                         Layout.alignment: Qt.AlignVCenter
                         verticalAlignment: Text.AlignVCenter
@@ -241,7 +258,7 @@ Popup {
                             w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0
                             return item_bg.width - w - item_bg.margins * 4
                         }
-                        Layout.leftMargin: (!model.menu_icon && model.menu_text) ? menu_label.contentHeight + item.spacing : 0
+                        Layout.leftMargin: (!model.menuIcon && model.menuText) ? menu_label.contentHeight + item.spacing : 0
                     }
                 }
 
@@ -417,7 +434,7 @@ Popup {
                 model: control.pageModel
                 Loader {
                     active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
-                    source: typeof(modelData.sourceUrl) !== 'undefined' ? modelData.sourceUrl : ""
+                    source: typeof(modelData.sourceUrl) !== 'undefined' && modelData.sourceUrl !== ""? modelData.sourceUrl : ""
                     sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined
                     onLoaded: {
                         if (typeof(modelData.sourceArgs) === 'undefined')

lib_source/qml/Qt5/RibbonBlur.qml

@@ -5,6 +5,10 @@ import RibbonUI 1.0
 Item {
     id: control
     property int radius: 0
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
     property int blurRadius: 32
     property alias target: effect.sourceItem
     property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
@@ -17,7 +21,6 @@ Item {
         id: effect
         anchors.fill: parent
         sourceRect: control.targetRect
-        sourceItem: control.target
         visible: false
     }
 
@@ -31,10 +34,14 @@ Item {
         visible: false
     }
 
-    Rectangle{
+    RibbonRectangle{
         anchors.fill: parent
         color: control.useSolidBg ? control.maskColor : 'transparent'
         radius: control.radius
+        topLeftRadius: control.topLeftRadius
+        bottomLeftRadius: control.bottomLeftRadius
+        topRightRadius: control.topRightRadius
+        bottomRightRadius: control.bottomRightRadius
         OpacityMask {
             anchors.fill: parent
             source: blur

lib_source/qml/Qt5/RibbonBottomBar.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Window 2.15
 import RibbonUI 1.0
 
 Item {
@@ -13,7 +14,8 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property bool showVersion: true
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
 
     anchors{
         left: parent.left
@@ -21,6 +23,25 @@ Item {
         bottom: parent.bottom
     }
 
+    RibbonBlur{
+        id: blur
+        anchors.fill: parent
+        maskColor: modernStyle ? isDarkMode ? "#141414" : "#F5F5F5" : isDarkMode ? "#3D3D3D" : "#D9D9D9"
+        maskOpacity: bgOpacity
+        useSolidBg: true
+        clip: true
+        target: Window.window.viewItems
+        targetRect: Qt.rect(x, Window.window.viewItems.y + Window.window.viewItems.height, width, height)
+        bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
+        bottomRightRadius: bottomLeftRadius
+        Behavior on maskColor {
+            ColorAnimation {
+                duration: 60
+                easing.type: Easing.OutSine
+            }
+        }
+    }
+
     Rectangle{
         visible: !modernStyle
         color: "#3D3D3D"
@@ -84,4 +105,6 @@ Item {
             onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
         }
     }
+
+    Component.onCompleted: Window.window.bottomBar = root
 }

lib_source/qml/Qt5/RibbonObject.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.15
+
+QtObject {
+    id: control
+    property var properties: ({})
+    property var property_names: []
+
+    function getPropertiesReady(){
+        properties = {}
+        for (let i = 0; i < property_names.length; i++){
+            if(typeof control[property_names[i]] !== 'undefined')
+            {
+                properties[property_names[i]] = control[property_names[i]]
+            }
+        }
+    }
+}

lib_source/qml/Qt5/RibbonPopup.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
-import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
 import RibbonUI 1.0
 import QtGraphicalEffects 1.0
 

lib_source/qml/Qt5/RibbonTabBar.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Window 2.15
 import QtGraphicalEffects 1.0
 import RibbonUI 1.0
 
@@ -20,10 +21,12 @@ Item{
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3"
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
     property string borderColor: isDarkMode ? "black" : "#CCCCCC"
     property bool showSettingsBtn: true
     property alias count: bar.count
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
+    property real modernMargin: modernStyle ? 10 : 0
 
     signal settingsBtnClicked()
 
@@ -56,21 +59,25 @@ Item{
             top: modernStyle ? bar_view.bottom : top_border.bottom
             left: parent.left
             right: parent.right
-            bottom:bottom_border.top
-            topMargin: modernStyle ? 10 :0
-            leftMargin: modernStyle ? 10 :0
-            rightMargin: modernStyle ? 10 :0
-            bottomMargin: modernStyle ? 10 :0
+            bottom: bottom_border.top
+            topMargin: modernMargin
+            leftMargin: anchors.topMargin
+            rightMargin: anchors.topMargin
+            bottomMargin: anchors.topMargin
         }
         clip: true
-        opacity:bgOpacity
 
-        Rectangle{
+        RibbonBlur{
+            id: blur
             anchors.fill: parent
-            color: bgColor
-            opacity:bgOpacity
+            maskColor: bgColor
+            maskOpacity: bgOpacity
+            useSolidBg: true
             radius: modernStyle ? 10 :0
-            Behavior on color {
+            clip: true
+            target: Window.window.viewItems
+            targetRect: mapToItem(Window.window.viewItems, blur.x, blur.y, width, height)
+            Behavior on maskColor {
                 ColorAnimation {
                     duration: 60
                     easing.type: Easing.OutSine
@@ -278,6 +285,7 @@ Item{
         onTriggered: folded = false
     }
 
+    Component.onCompleted: Window.window.tabBar = root
     //onModern_styleChanged: refresh()
 
     function addPage(content, is_highlight)

lib_source/qml/Qt5/RibbonTour.qml

@@ -15,13 +15,14 @@ Popup {
     property string contentSource: "RibbonTourContent.qml"
     property var contentItems: undefined
     property bool destroyAfterClose: true
-    property var currentTarget: targetList ? targetList[0].target : parent
+    property var currentTarget: targetList.length ? targetList[0].target : parent
     property int currentIndex: 0
     property bool preferShowAbove: true
     property bool useHighlightOrRect: true
     property real contentEdgeMargin: 10
     property alias contentArgs: control.args
     property alias alwaysNotAutoPopup: always_hide_ckbox.checked
+    default property alias data: data_container.data
     modal: true
     margins: 0
     padding: 0
@@ -33,7 +34,7 @@ Popup {
     y: (Overlay.overlay.height - height) / 2
     closePolicy: Popup.NoAutoClose
     Overlay.modal:Rectangle{
-        color: !RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.5) : Qt.rgba(0,0,0,0.5)
+        color: !RibbonTheme.isDarkMode ? Qt.alpha("white", 0.5) : Qt.alpha("black", 0.5)
     }
     Overlay.modeless:Rectangle{
         color:"transparent"
@@ -85,7 +86,7 @@ Popup {
             Loader{
                 id: loader
                 sourceComponent: contentSource ? undefined : contentItems
-                source: contentSource
+                source: targetList.length ? contentSource : ""
                 onLoaded: {
                     if (!control.args)
                         return
@@ -115,8 +116,8 @@ Popup {
                     showTooltip: false
                     enabled: popup.currentIndex
                     onClicked: {
-                        if(popup.targetList[popup.currentIndex].exit_func)
-                            popup.targetList[popup.currentIndex].exit_func()
+                        if(popup.targetList[popup.currentIndex].exitFunc)
+                            popup.targetList[popup.currentIndex].exitFunc()
                         popup.currentIndex--
                         popup.currentTarget = popup.targetList[popup.currentIndex].target
                     }
@@ -132,8 +133,8 @@ Popup {
                         }
                         else
                         {
-                            if(popup.targetList[popup.currentIndex].exit_func)
-                                popup.targetList[popup.currentIndex].exit_func()
+                            if(popup.targetList[popup.currentIndex].exitFunc)
+                                popup.targetList[popup.currentIndex].exitFunc()
                             popup.currentIndex++
                             popup.currentTarget = popup.targetList[popup.currentIndex].target
                         }
@@ -143,6 +144,24 @@ Popup {
         }
     }
 
+    Item{
+        id: data_container
+    }
+
+    Component.onCompleted: {
+        for(let index = targetList.length; index < data_container.resources.length; index++)
+        {
+            if(data_container.resources[index] instanceof RibbonTourItem)
+            {
+                let item = data_container.resources[index]
+                item.getPropertiesReady()
+                targetList.push(item.properties)
+            }
+        }
+        if(targetList.length)
+            targetListChanged()
+    }
+
     Popup{
         id: rec
         parent: Overlay.overlay
@@ -168,8 +187,8 @@ Popup {
             radius: 5
             ShaderEffectSource {
                 anchors.centerIn: parent
-                width: currentTarget.width
-                height: currentTarget.height
+                width: currentTarget ? currentTarget.width : 0
+                height: currentTarget ? currentTarget.height : 0
                 sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height)
                 sourceItem: currentTarget
                 visible: popup.useHighlightOrRect
@@ -208,9 +227,13 @@ Popup {
 
     onCurrentTargetChanged: {
         Qt.callLater(function() {
+            if(targetList.length<=0){
+                popup.close()
+                return
+            }
             popup.update()
-            if(popup.targetList[popup.currentIndex].enter_func)
-                popup.targetList[popup.currentIndex].enter_func()
+            if(popup.targetList[popup.currentIndex].enterFunc)
+                popup.targetList[popup.currentIndex].enterFunc()
         })
     }
 
@@ -229,18 +252,24 @@ Popup {
     }
 
     onAboutToHide: {
+        if(targetList.length<=0){
+            return
+        }
         rec.close()
-        if(popup.targetList[popup.currentIndex].exit_func)
-            popup.targetList[popup.currentIndex].exit_func()
+        if(popup.targetList[popup.currentIndex].exitFunc)
+            popup.targetList[popup.currentIndex].exitFunc()
         loader.sourceComponent = undefined
         loader.source = ""
     }
 
     onAboutToShow: {
+        if(targetList.length<=0){
+            return
+        }
         loader.sourceComponent = contentSource ? undefined : contentItems
         loader.source = contentSource
         rec.open()
-        currentTarget = targetList[0].target
+        currentTarget = targetList.length ? targetList[0].target : parent
         currentIndex = 0
     }
 

lib_source/qml/Qt5/RibbonTourItem.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.15
+import RibbonUI 1.0
+
+RibbonObject {
+    id: control
+    required property string title
+    property string text
+    property var target
+    property var enterFunc
+    property var exitFunc
+    property_names: ['title','text','target','enterFunc','exitFunc']
+}

lib_source/qml/Qt5/RibbonView.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.11
+import QtQuick.Window 2.15
 import QtGraphicalEffects 1.0
 import RibbonUI 1.0
 
@@ -10,8 +11,6 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property int spacing: 5
-    property int topPadding: 0
-    property int bottomPadding: 0
     property alias bgColor: bg.color
     property alias bgVisible: bg.visible
     z:-2
@@ -25,27 +24,21 @@ Item {
         visible: !modernStyle
     }
 
-    RibbonBlur{
-        id: top_mask
+    Item{
+        id: top_border
         anchors{
             left: parent.left
             right: parent.right
             top: parent.top
         }
-        height: Math.abs(topPadding)
-        target: container
-        maskOpacity: 0
-        visible: topPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
+        height: Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0
     }
 
     Item{
         id: clipper
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top:top_mask.bottom
-        implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding)
+        anchors.top: top_border.bottom
+        implicitHeight: parent.height - Math.abs(top_border.height) - Math.abs(bottom_border.height)
         implicitWidth: parent.width
         clip: true
         ColumnLayout{
@@ -59,19 +52,15 @@ Item {
         }
     }
 
-    RibbonBlur{
-        id: bottom_mask
+    Item{
+        id: bottom_border
         anchors{
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
-        height: Math.abs(bottomPadding)
-        target: container
-        maskOpacity: 0
-        visible: bottomPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
+        height: Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0
     }
+
+    Component.onCompleted: Window.window.viewItems = container
 }

lib_source/qml/Qt5/RibbonWindow.qml

@@ -19,6 +19,9 @@ Window {
     property bool comfirmedQuit: false
     property bool blurBehindWindow: true
     property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug
+    property var viewItems
+    property var tabBar
+    property var bottomBar
     readonly property int borderWidth: border_rect.border.width
     readonly property int borderRadius: border_rect.radius
     visible: false

lib_source/qml/Qt6/RibbonBackStageMenuItem.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import RibbonUI
+
+RibbonObject {
+    id: control
+    required property string menuText
+    property var menuIcon
+    property var menuIconFilled
+    required property var type
+    property var sourceComponent
+    property var sourceArgs
+    property bool clickOnly: false
+    property var sourceUrl
+    property var clickFunc
+    property int propertyCount: 0
+    property_names: ['menuText','menuIcon','menuIconFilled','type','sourceComponent','sourceArgs','clickOnly','sourceUrl','clickFunc']
+}

lib_source/qml/Qt6/RibbonBackStageView.qml

@@ -21,7 +21,7 @@ Popup {
     property string backText: qsTr("Back")
     property int radius: 0
     property var pageModel: []
-
+    default property alias data: data_container.data
     signal backBtnClicked()
 
     background: Item{}
@@ -35,11 +35,28 @@ Popup {
         }
     }
 
-    Component.onCompleted: refreshModel()
+    Component.onCompleted: {
+        for(let index = pageModel.length; index < data_container.resources.length; index++)
+        {
+            if(data_container.resources[index] instanceof RibbonBackStageMenuItem)
+            {
+                let item = data_container.resources[index]
+                item.getPropertiesReady()
+                pageModel.push(item.properties)
+            }
+        }
+        if(pageModel.length)
+            pageModelChanged()
+        refreshModel()
+    }
     onPageModelChanged: refreshModel()
     onAboutToShow: show()
     onBackBtnClicked: hide()
 
+    Item{
+        id: data_container
+    }
+
     RibbonBlur{
         id: blur_bg
         anchors.fill: parent
@@ -204,18 +221,18 @@ Popup {
 
                     RibbonIcon{
                         id :rib_icon
-                        iconSource: typeof(model.menu_icon) === "number" ? model.menu_icon : 0
-                        iconSourceFilled: typeof(model.menu_icon_filled) === "number" ? model.menu_icon_filled : iconSource
+                        iconSource: typeof(model.menuIcon) === "number" ? model.menuIcon : 0
+                        iconSourceFilled: typeof(model.menuIconFilled) === "number" ? model.menuIconFilled : iconSource
                         iconSize: menu_label.visible ? menu_label.contentHeight : 16
-                        visible: typeof(model.menu_icon) === "number" && model.menu_icon
+                        visible: typeof(model.menuIcon) === "number" && model.menuIcon
                         Layout.alignment: Qt.AlignVCenter
                         filled: item_bg.view.currentIndex === index && item_bg.isCurrentMenu
-                        color: model.menu_iconColor ? model.menu_iconColor : back_btn.textColor
+                        color: model.menuIconColor ? model.menuIconColor : back_btn.textColor
                     }
                     Image {
                         id: pic_icon
-                        source: typeof(model.menu_icon) === "string" ? model.menu_icon : ""
-                        visible: typeof(model.menu_icon) === "string"
+                        source: typeof(model.menuIcon) === "string" ? model.menuIcon : ""
+                        visible: typeof(model.menuIcon) === "string"
                         fillMode:Image.PreserveAspectFit
                         mipmap: true
                         autoTransform: true
@@ -225,7 +242,7 @@ Popup {
                     }
                     Text{
                         id: menu_label
-                        text: model.menu_text
+                        text: model.menuText
                         color: !mouse.containsMouse && RibbonTheme.modernStyle && item_bg.view.currentIndex === index && item_bg.isCurrentMenu ? RibbonTheme.isDarkMode ? "#779CDB" : "#5882BB" : back_btn.textColor
                         Layout.alignment: Qt.AlignVCenter
                         verticalAlignment: Text.AlignVCenter
@@ -241,14 +258,14 @@ Popup {
                             w += (rib_icon.visible || pic_icon.visible) && menu_label.text ? item.spacing : 0
                             return item_bg.width - w - item_bg.margins * 4
                         }
-                        Layout.leftMargin: (!model.menu_icon && model.menu_text) ? menu_label.contentHeight + item.spacing : 0
+                        Layout.leftMargin: (!model.menuIcon && model.menuText) ? menu_label.contentHeight + item.spacing : 0
                     }
                 }
 
                 RibbonToolTip{
                     id: tooltip
                     visible: mouse.containsMouse && typeof(model.showTooltip) != "undefined" ? model.showTooltip : false
-                                                                                                && typeof(model.tool_text) != "undefined" ? model.tool_text : false
+                                                                                               && typeof(model.tool_text) != "undefined" ? model.tool_text : false
                     text: model.tool_text ? model.tool_text : ""
                 }
 
@@ -417,7 +434,7 @@ Popup {
                 model: control.pageModel
                 Loader {
                     active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
-                    source: typeof(modelData.sourceUrl) !== 'undefined' ? modelData.sourceUrl : ""
+                    source: typeof(modelData.sourceUrl) !== 'undefined' && modelData.sourceUrl !== ""? modelData.sourceUrl : ""
                     sourceComponent: typeof(control.pageModel[modelData.globalIndex].sourceComponent) !== 'undefined' && typeof(modelData.sourceUrl) === 'undefined' ? control.pageModel[modelData.globalIndex].sourceComponent : undefined
                     onLoaded: {
                         if (typeof(modelData.sourceArgs) === 'undefined')

lib_source/qml/Qt6/RibbonBlur.qml

@@ -5,6 +5,10 @@ import RibbonUI
 Item {
     id: control
     property int radius: 0
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
     property int blurRadius: 32
     property alias target: effect.sourceItem
     property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
@@ -17,7 +21,6 @@ Item {
         id: effect
         anchors.fill: parent
         sourceRect: control.targetRect
-        sourceItem: control.target
         visible: false
     }
 
@@ -31,10 +34,14 @@ Item {
         visible: false
     }
 
-    Rectangle{
+    RibbonRectangle{
         anchors.fill: parent
         color: control.useSolidBg ? control.maskColor : 'transparent'
         radius: control.radius
+        topLeftRadius: control.topLeftRadius
+        bottomLeftRadius: control.bottomLeftRadius
+        topRightRadius: control.topRightRadius
+        bottomRightRadius: control.bottomRightRadius
         OpacityMask {
             anchors.fill: parent
             source: blur

lib_source/qml/Qt6/RibbonBottomBar.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Layouts
+import QtQuick.Window
 import RibbonUI
 
 Item {
@@ -13,7 +14,8 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property bool showVersion: true
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
 
     anchors{
         left: parent.left
@@ -21,6 +23,25 @@ Item {
         bottom: parent.bottom
     }
 
+    RibbonBlur{
+        id: blur
+        anchors.fill: parent
+        maskColor: modernStyle ? isDarkMode ? "#141414" : "#F5F5F5" : isDarkMode ? "#3D3D3D" : "#D9D9D9"
+        maskOpacity: bgOpacity
+        useSolidBg: true
+        clip: true
+        target: Window.window.viewItems
+        targetRect: Qt.rect(x, Window.window.viewItems.y + Window.window.viewItems.height, width, height)
+        bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
+        bottomRightRadius: bottomLeftRadius
+        Behavior on maskColor {
+            ColorAnimation {
+                duration: 60
+                easing.type: Easing.OutSine
+            }
+        }
+    }
+
     Rectangle{
         visible: !modernStyle
         color: "#3D3D3D"
@@ -84,4 +105,6 @@ Item {
             onClicked: Qt.openUrlExternally("https://github.com/mentalfl0w/RibbonUI")
         }
     }
+
+    Component.onCompleted: Window.window.bottomBar = root
 }

lib_source/qml/Qt6/RibbonObject.qml

@@ -0,0 +1,17 @@
+import QtQuick
+
+QtObject {
+    id: control
+    property var properties: ({})
+    property var property_names: []
+
+    function getPropertiesReady(){
+        properties = {}
+        for (let i = 0; i < property_names.length; i++){
+            if(typeof control[property_names[i]] !== 'undefined')
+            {
+                properties[property_names[i]] = control[property_names[i]]
+            }
+        }
+    }
+}

lib_source/qml/Qt6/RibbonScrollIndicator.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import RibbonUI
 
 ScrollIndicator {

lib_source/qml/Qt6/RibbonTabBar.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Window
 import Qt5Compat.GraphicalEffects
 import RibbonUI
 
@@ -20,10 +21,12 @@ Item{
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property string bgColor: isDarkMode ? "#2D2D2D" : "#F4F5F3"
-    property real bgOpacity: 0.8
+    property real bgOpacity: blurEnabled ? 0.8 : 1
     property string borderColor: isDarkMode ? "black" : "#CCCCCC"
     property bool showSettingsBtn: true
     property alias count: bar.count
+    property bool blurEnabled: typeof Window.window.viewItems !== "undefined"
+    property real modernMargin: modernStyle ? 10 : 0
 
     signal settingsBtnClicked()
 
@@ -56,21 +59,25 @@ Item{
             top: modernStyle ? bar_view.bottom : top_border.bottom
             left: parent.left
             right: parent.right
-            bottom:bottom_border.top
-            topMargin: modernStyle ? 10 :0
-            leftMargin: modernStyle ? 10 :0
-            rightMargin: modernStyle ? 10 :0
-            bottomMargin: modernStyle ? 10 :0
+            bottom: bottom_border.top
+            topMargin: modernMargin
+            leftMargin: anchors.topMargin
+            rightMargin: anchors.topMargin
+            bottomMargin: anchors.topMargin
         }
         clip: true
-        opacity:bgOpacity
 
-        Rectangle{
+        RibbonBlur{
+            id: blur
             anchors.fill: parent
-            color: bgColor
-            opacity:bgOpacity
+            maskColor: bgColor
+            maskOpacity: bgOpacity
+            useSolidBg: true
             radius: modernStyle ? 10 :0
-            Behavior on color {
+            clip: true
+            target: Window.window.viewItems
+            targetRect: mapToItem(Window.window.viewItems, blur.x, blur.y, width, height)
+            Behavior on maskColor {
                 ColorAnimation {
                     duration: 60
                     easing.type: Easing.OutSine
@@ -278,6 +285,8 @@ Item{
         onTriggered: folded = false
     }
 
+    Component.onCompleted: Window.window.tabBar = root
+
     //onModern_styleChanged: refresh()
 
     function addPage(content, is_highlight)

lib_source/qml/Qt6/RibbonTour.qml

@@ -16,13 +16,14 @@ Popup {
     property string contentSource: "RibbonTourContent.qml"
     property var contentItems: undefined
     property bool destroyAfterClose: true
-    property var currentTarget: targetList ? targetList[0].target : parent
+    property var currentTarget: targetList.length ? targetList[0].target : parent
     property int currentIndex: 0
     property bool preferShowAbove: true
     property bool useHighlightOrRect: true
     property real contentEdgeMargin: 10
     property alias contentArgs: control.args
     property alias alwaysNotAutoPopup: always_hide_ckbox.checked
+    default property alias data: data_container.data
     modal: true
     margins: 0
     padding: 0
@@ -86,7 +87,7 @@ Popup {
             Loader{
                 id: loader
                 sourceComponent: contentSource ? undefined : contentItems
-                source: contentSource
+                source: targetList.length ? contentSource : ""
                 onLoaded: {
                     if (!control.args)
                         return
@@ -116,8 +117,8 @@ Popup {
                     showTooltip: false
                     enabled: popup.currentIndex
                     onClicked: {
-                        if(popup.targetList[popup.currentIndex].exit_func)
-                            popup.targetList[popup.currentIndex].exit_func()
+                        if(popup.targetList[popup.currentIndex].exitFunc)
+                            popup.targetList[popup.currentIndex].exitFunc()
                         popup.currentIndex--
                         popup.currentTarget = popup.targetList[popup.currentIndex].target
                     }
@@ -133,8 +134,8 @@ Popup {
                         }
                         else
                         {
-                            if(popup.targetList[popup.currentIndex].exit_func)
-                                popup.targetList[popup.currentIndex].exit_func()
+                            if(popup.targetList[popup.currentIndex].exitFunc)
+                                popup.targetList[popup.currentIndex].exitFunc()
                             popup.currentIndex++
                             popup.currentTarget = popup.targetList[popup.currentIndex].target
                         }
@@ -144,6 +145,24 @@ Popup {
         }
     }
 
+    Item{
+        id: data_container
+    }
+
+    Component.onCompleted: {
+        for(let index = targetList.length; index < data_container.resources.length; index++)
+        {
+            if(data_container.resources[index] instanceof RibbonTourItem)
+            {
+                let item = data_container.resources[index]
+                item.getPropertiesReady()
+                targetList.push(item.properties)
+            }
+        }
+        if(targetList.length)
+            targetListChanged()
+    }
+
     Popup{
         id: rec
         parent: Overlay.overlay
@@ -169,8 +188,8 @@ Popup {
             radius: 5
             ShaderEffectSource {
                 anchors.centerIn: parent
-                width: currentTarget.width
-                height: currentTarget.height
+                width: currentTarget ? currentTarget.width : 0
+                height: currentTarget ? currentTarget.height : 0
                 sourceRect: Qt.rect(0, 0, currentTarget.width, currentTarget.height)
                 sourceItem: currentTarget
                 visible: popup.useHighlightOrRect
@@ -209,9 +228,13 @@ Popup {
 
     onCurrentTargetChanged: {
         Qt.callLater(function() {
+            if(targetList.length<=0){
+                popup.close()
+                return
+            }
             popup.update()
-            if(popup.targetList[popup.currentIndex].enter_func)
-                popup.targetList[popup.currentIndex].enter_func()
+            if(popup.targetList[popup.currentIndex].enterFunc)
+                popup.targetList[popup.currentIndex].enterFunc()
         })
     }
 
@@ -230,18 +253,24 @@ Popup {
     }
 
     onAboutToHide: {
+        if(targetList.length<=0){
+            return
+        }
         rec.close()
-        if(popup.targetList[popup.currentIndex].exit_func)
-            popup.targetList[popup.currentIndex].exit_func()
+        if(popup.targetList[popup.currentIndex].exitFunc)
+            popup.targetList[popup.currentIndex].exitFunc()
         loader.sourceComponent = undefined
         loader.source = ""
     }
 
     onAboutToShow: {
+        if(targetList.length<=0){
+            return
+        }
         loader.sourceComponent = contentSource ? undefined : contentItems
         loader.source = contentSource
         rec.open()
-        currentTarget = targetList[0].target
+        currentTarget = targetList.length ? targetList[0].target : parent
         currentIndex = 0
     }
 

lib_source/qml/Qt6/RibbonTourItem.qml

@@ -0,0 +1,12 @@
+import QtQuick
+import RibbonUI
+
+RibbonObject {
+    id: control
+    required property string title
+    property string text
+    property var target
+    property var enterFunc
+    property var exitFunc
+    property_names: ['title','text','target','enterFunc','exitFunc']
+}

lib_source/qml/Qt6/RibbonView.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Window
 import Qt5Compat.GraphicalEffects
 import RibbonUI
 
@@ -10,8 +11,6 @@ Item {
     property bool modernStyle: RibbonTheme.modernStyle
     property bool isDarkMode: RibbonTheme.isDarkMode
     property int spacing: 5
-    property int topPadding: 0
-    property int bottomPadding: 0
     property alias bgColor: bg.color
     property alias bgVisible: bg.visible
     z:-2
@@ -25,27 +24,21 @@ Item {
         visible: !modernStyle
     }
 
-    RibbonBlur{
-        id: top_mask
+    Item{
+        id: top_border
         anchors{
             left: parent.left
             right: parent.right
             top: parent.top
         }
-        height: Math.abs(topPadding)
-        target: container
-        maskOpacity: 0
-        visible: topPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
+        height: Window.window.tabBar ? Math.abs(Window.window.tabBar.height - Window.window.tabBar.modernMargin) : 0
     }
 
     Item{
         id: clipper
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top:top_mask.bottom
-        implicitHeight: parent.height - Math.abs(topPadding) - Math.abs(bottomPadding)
+        anchors.top: top_border.bottom
+        implicitHeight: parent.height - Math.abs(top_border.height) - Math.abs(bottom_border.height)
         implicitWidth: parent.width
         clip: true
         ColumnLayout{
@@ -59,19 +52,15 @@ Item {
         }
     }
 
-    RibbonBlur{
-        id: bottom_mask
+    Item{
+        id: bottom_border
         anchors{
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
-        height: Math.abs(bottomPadding)
-        target: container
-        maskOpacity: 0
-        visible: bottomPadding
-        clip: true
-        targetRect: Qt.rect(x,y-topPadding,width,height)
-        useSolidBg: false
+        height: Window.window.tabBar ? Math.abs(Window.window.bottomBar.height) : 0
     }
+
+    Component.onCompleted: Window.window.viewItems = container
 }

lib_source/qml/Qt6/RibbonWindow.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import RibbonUI
+import QtQuick.Window
 import QWindowKit
 
 Window {
@@ -18,6 +19,9 @@ Window {
     property bool comfirmedQuit: false
     property bool blurBehindWindow: true
     property int windowsTopFix: Qt.platform.os === 'windows' ? 1 : 0 // a trick to fix Qt or QWindowKit's bug
+    property var viewItems
+    property var tabBar
+    property var bottomBar
     readonly property int borderWidth: border_rect.border.width
     readonly property int borderRadius: border_rect.radius
     visible: false