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

RibbonBackStageView: Add RibbonBackStageMenuItem for convenient use.
RibbonView,RibbonTabBar,RibbonBottomBar: blur effect migrated.
2024-06-23 02:20:44 +08:00 · 2024-06-23 02:12:49 +08:00 · 2024-06-23 02:04:27 +08:00
28 changed files with 647 additions and 293 deletions
--- a/example/qml/Qt5/about.qml
+++ b/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 {
--- a/example/qml/Qt5/example.qml
+++ b/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: ()=>{
+        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
            }
-            },
-            {
-                title: qsTr("Tab Bar Buttons"),
-                text: qsTr("Tool buttons at the top of tab bar."),
+        }
+        RibbonTourItem{
+            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: ()=>{
+        }
+        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)
-                },
-                exit_func: ()=>{
+            }
+            exitFunc: ()=>{
                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."),
+        }
+        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
-            },
-            {
-                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."),
+        }
+        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
-            },
-            {
-                title: qsTr("Line Edits"),
-                text: qsTr("Line edits with/without icon."),
-                target: lineedit_layout,
-                enter_func: ()=>{
+        }
+        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)
-                },
-                exit_func: ()=>{
+            }
+            exitFunc: ()=>{
                tab_bar.setPage(0)
                lineedit_with_icon.clear()
                tour.refresh(400)
            }
-            },
-            {
-                title: qsTr("Bottom Bar"),
-                text: qsTr("A bottom bar for window."),
+        }
+        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")
+        }
    }
 }
--- a/example/qml/Qt5/pages/SettingsMenuPage.qml
+++ b/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
+                    }
+                }
+            }
+        }
    }
 }
--- a/example/qml/Qt6/example.qml
+++ b/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: ()=>{
+        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
            }
-            },
-            {
-                title: qsTr("Tab Bar Buttons"),
-                text: qsTr("Tool buttons at the top of tab bar."),
+        }
+        RibbonTourItem{
+            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: ()=>{
+        }
+        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)
-                },
-                exit_func: ()=>{
+            }
+            exitFunc: ()=>{
                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."),
+        }
+        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
-            },
-            {
-                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."),
+        }
+        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
-            },
-            {
-                title: qsTr("Line Edits"),
-                text: qsTr("Line edits with/without icon."),
-                target: lineedit_layout,
-                enter_func: ()=>{
+        }
+        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)
-                },
-                exit_func: ()=>{
+            }
+            exitFunc: ()=>{
                tab_bar.setPage(0)
                lineedit_with_icon.clear()
                tour.refresh(400)
            }
-            },
-            {
-                title: qsTr("Bottom Bar"),
-                text: qsTr("A bottom bar for window."),
+        }
+        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")
+        }
    }
 }
--- a/example/qml/Qt6/pages/SettingsMenuPage.qml
+++ b/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
+                    }
+                }
+            }
+        }
    }
 }
--- a/lib_source/CMakeLists.txt
+++ b/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}/")

--- a/lib_source/qml/Qt5/RibbonBackStageMenuItem.qml
+++ b/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']
+}
--- a/lib_source/qml/Qt5/RibbonBackStageView.qml
+++ b/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')
--- a/lib_source/qml/Qt5/RibbonBlur.qml
+++ b/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
--- a/lib_source/qml/Qt5/RibbonBottomBar.qml
+++ b/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
 }
--- a/lib_source/qml/Qt5/RibbonObject.qml
+++ b/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]]
+            }
+        }
+    }
+}
--- a/lib_source/qml/Qt5/RibbonPopup.qml
+++ b/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

--- a/lib_source/qml/Qt5/RibbonTabBar.qml
+++ b/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()

@ -57,20 +60,24 @@ Item{
            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
+            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)
--- a/lib_source/qml/Qt5/RibbonTour.qml
+++ b/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
    }

--- a/lib_source/qml/Qt5/RibbonTourItem.qml
+++ b/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']
+}
--- a/lib_source/qml/Qt5/RibbonView.qml
+++ b/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
 }
--- a/lib_source/qml/Qt5/RibbonWindow.qml
+++ b/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
--- a/lib_source/qml/Qt6/RibbonBackStageMenuItem.qml
+++ b/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']
+}
--- a/lib_source/qml/Qt6/RibbonBackStageView.qml
+++ b/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,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')
--- a/lib_source/qml/Qt6/RibbonBlur.qml
+++ b/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
--- a/lib_source/qml/Qt6/RibbonBottomBar.qml
+++ b/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
 }
--- a/lib_source/qml/Qt6/RibbonObject.qml
+++ b/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]]
+            }
+        }
+    }
+}
--- a/lib_source/qml/Qt6/RibbonScrollIndicator.qml
+++ b/lib_source/qml/Qt6/RibbonScrollIndicator.qml
@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import RibbonUI

 ScrollIndicator {
--- a/lib_source/qml/Qt6/RibbonTabBar.qml
+++ b/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()

@ -57,20 +60,24 @@ Item{
            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
+            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)
--- a/lib_source/qml/Qt6/RibbonTour.qml
+++ b/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
    }

--- a/lib_source/qml/Qt6/RibbonTourItem.qml
+++ b/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']
+}
--- a/lib_source/qml/Qt6/RibbonView.qml
+++ b/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
 }
--- a/lib_source/qml/Qt6/RibbonWindow.qml
+++ b/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
Author	SHA1	Message	Date
Mentalflow	8a88080f4d	RibbonTour and exmaple: Add RibbonTourItem for convenient use and add titleBar icon switch for example's settings.	2024-06-23 02:20:44 +08:00
Mentalflow	2c13c9c26b	RibbonBackStageView: Add RibbonBackStageMenuItem for convenient use.	2024-06-23 02:12:49 +08:00
Mentalflow	c94208e8e6	RibbonView,RibbonTabBar,RibbonBottomBar: blur effect migrated.	2024-06-23 02:04:27 +08:00