Mentalflow
/
RibbonUI
mirror of https://github.com/mentalfl0w/RibbonUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

example/component/TabBar: Adapt to RibbonTabPage's changes.

This commit is contained in:
Mentalflow 2025-05-24 00:59:15 +08:00
parent 4793747c83
commit 9ba6675bd7
Signed by: Mentalflow
GPG Key ID: 5AE68D4401A2EE71
2 changed files with 119 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
example/qml/Qt5/components/TabBar.qml
View File

@ -6,18 +6,18 @@ import RibbonUI 1.1
RibbonTabBar { RibbonTabBar {
id: tab_bar id: tab_bar
property alias tab_bar_tool: tab_bar_tool readonly property alias tab_bar_tool: tab_bar_tool
property alias slider_layout: slider_layout readonly property var slider_layout: basic_page.sliderLayout
property alias slider_with_btn: slider_with_btn readonly property var slider_with_btn: basic_page.sliderWithBtn
property alias slider_without_btn: slider_without_btn readonly property var slider_without_btn: basic_page.sliderWithoutBtn
property alias switch_layout: switch_layout readonly property var switch_layout: basic_page.switchLayout
property alias btn_with_color_and_grabberText: btn_with_color_and_grabberText readonly property var btn_with_color_and_grabberText: basic_page.btnWithColorAndGrabberText
property alias checkbox_layout: checkbox_layout readonly property var checkbox_layout: basic_page.checkBoxLayout
property alias button_layout: button_layout readonly property var button_layout: basic_page.buttonLayout
property alias btn_without_bg_and_label: btn_without_bg_and_label readonly property var btn_without_bg_and_label: basic_page.btnWithoutBgAndLabel
property alias pushbutton_layout: pushbutton_layout readonly property var pushbutton_layout: basic_page.pushButtonLayout
property alias lineedit_layout: lineedit_layout readonly property var lineedit_layout: input_page.lineEditLayout
property alias lineedit_with_icon: lineedit_with_icon readonly property var lineedit_with_icon: input_page.lineEditWithIcon
modernStyle: root.modernStyle modernStyle: root.modernStyle
rightToolBar: RowLayout{ rightToolBar: RowLayout{
@ -36,7 +36,34 @@ RibbonTabBar {
RibbonTabPage{ RibbonTabPage{
id: basic_page id: basic_page
title: qsTr("Basic") title: qsTr("Basic")
property var sliderLayout: getItem(0).sliderLayout
property var sliderWithBtn: getItem(0).sliderWithBtn
property var sliderWithoutBtn: getItem(0).sliderWithoutBtn
property var switchLayout: getItem(1).switchLayout
property var btnWithColorAndGrabberText: getItem(1).btnWithColorAndGrabberText
property var checkBoxLayout: getItem(2).checkBoxLayout
property var buttonLayout: getItem(3).buttonLayout
property var btnWithoutBgAndLabel: getItem(3).btnWithoutBgAndLabel
property var pushButtonLayout: getItem(4).pushButtonLayout
onContainerItemUpdated: {
if(getItem(0)){
sliderLayout = getItem(0).sliderLayout
sliderWithBtn = getItem(0).sliderWithBtn
sliderWithoutBtn = getItem(0).sliderWithoutBtn
switchLayout = getItem(1).switchLayout
btnWithColorAndGrabberText = getItem(1).btnWithColorAndGrabberText
checkBoxLayout = getItem(2).checkBoxLayout
buttonLayout = getItem(3).buttonLayout
btnWithoutBgAndLabel = getItem(3).btnWithoutBgAndLabel
pushButtonLayout = getItem(4).pushButtonLayout
}
}
RibbonTabGroup{ RibbonTabGroup{
property alias sliderLayout: slider_layout
property alias sliderWithBtn: slider_with_btn
property alias sliderWithoutBtn: slider_without_btn
showOpenExternal: true showOpenExternal: true
width: slider_layout.width + 20 width: slider_layout.width + 20
text: qsTr("Slider") text: qsTr("Slider")
@ -81,6 +108,8 @@ RibbonTabBar {
width: switch_layout.width + 30 width: switch_layout.width + 30
text: qsTr("Switch Button") text: qsTr("Switch Button")
showOpenExternal: true showOpenExternal: true
property alias switchLayout: switch_layout
property alias btnWithColorAndGrabberText: btn_with_color_and_grabberText
RowLayout{ RowLayout{
id: switch_layout id: switch_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -92,7 +121,6 @@ RibbonTabBar {
id: btn_with_color_and_grabberText id: btn_with_color_and_grabberText
text: "Button" text: "Button"
grabberCheckedColor: "red" grabberCheckedColor: "red"
checked: true
} }
RibbonSwitchButton{ RibbonSwitchButton{
text: "Button" text: "Button"
@ -130,6 +158,7 @@ RibbonTabBar {
width: checkbox_layout.width + 30 width: checkbox_layout.width + 30
text: qsTr("CheckBox") text: qsTr("CheckBox")
showOpenExternal: true showOpenExternal: true
property alias checkBoxLayout: checkbox_layout
RowLayout{ RowLayout{
id: checkbox_layout id: checkbox_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -166,6 +195,8 @@ RibbonTabBar {
width: button_layout.width + 30 width: button_layout.width + 30
text: qsTr("Button") text: qsTr("Button")
showOpenExternal: true showOpenExternal: true
property alias buttonLayout: button_layout
property alias btnWithoutBgAndLabel: btn_without_bg_and_label
RowLayout{ RowLayout{
id: button_layout id: button_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -234,6 +265,7 @@ RibbonTabBar {
RibbonTabGroup{ RibbonTabGroup{
width: pushbutton_layout.width + 30 width: pushbutton_layout.width + 30
text: qsTr("Push Button") text: qsTr("Push Button")
property alias pushButtonLayout: pushbutton_layout
RowLayout{ RowLayout{
id: pushbutton_layout id: pushbutton_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -295,10 +327,23 @@ RibbonTabBar {
} }
} }
RibbonTabPage{ RibbonTabPage{
id: input_page
title: qsTr("Input") title: qsTr("Input")
property var lineEditLayout: getItem(0).lineEditLayout
property var lineEditWithIcon: getItem(0).lineEditWithIcon
onContainerItemUpdated: {
if(getItem(0)){
lineEditLayout = getItem(0).lineEditLayout
lineEditWithIcon = getItem(0).lineEditWithIcon
}
}
RibbonTabGroup{ RibbonTabGroup{
width: lineedit_layout.width + 30 width: lineedit_layout.width + 30
text: qsTr("Line Edit") text: qsTr("Line Edit")
property alias lineEditLayout: lineedit_layout
property alias lineEditWithIcon: lineedit_with_icon
RowLayout{ RowLayout{
id: lineedit_layout id: lineedit_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -328,7 +373,7 @@ RibbonTabBar {
} }
} }
RibbonTabGroup{ RibbonTabGroup{
width: lineedit_layout.width + 30 width: textedit_layout.width + 30
text: qsTr("Text Edit") text: qsTr("Text Edit")
RowLayout{ RowLayout{
id: textedit_layout id: textedit_layout

74
example/qml/Qt6/components/TabBar.qml
View File

@ -1,22 +1,23 @@
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Window
import RibbonUI import RibbonUI
RibbonTabBar { RibbonTabBar {
id: tab_bar id: tab_bar
property alias tab_bar_tool: tab_bar_tool readonly property alias tab_bar_tool: tab_bar_tool
property alias slider_layout: slider_layout readonly property var slider_layout: basic_page.sliderLayout
property alias slider_with_btn: slider_with_btn readonly property var slider_with_btn: basic_page.sliderWithBtn
property alias slider_without_btn: slider_without_btn readonly property var slider_without_btn: basic_page.sliderWithoutBtn
property alias switch_layout: switch_layout readonly property var switch_layout: basic_page.switchLayout
property alias btn_with_color_and_grabberText: btn_with_color_and_grabberText readonly property var btn_with_color_and_grabberText: basic_page.btnWithColorAndGrabberText
property alias checkbox_layout: checkbox_layout readonly property var checkbox_layout: basic_page.checkBoxLayout
property alias button_layout: button_layout readonly property var button_layout: basic_page.buttonLayout
property alias btn_without_bg_and_label: btn_without_bg_and_label readonly property var btn_without_bg_and_label: basic_page.btnWithoutBgAndLabel
property alias pushbutton_layout: pushbutton_layout readonly property var pushbutton_layout: basic_page.pushButtonLayout
property alias lineedit_layout: lineedit_layout readonly property var lineedit_layout: input_page.lineEditLayout
property alias lineedit_with_icon: lineedit_with_icon readonly property var lineedit_with_icon: input_page.lineEditWithIcon
modernStyle: root.modernStyle modernStyle: root.modernStyle
rightToolBar: RowLayout{ rightToolBar: RowLayout{
@ -35,7 +36,34 @@ RibbonTabBar {
RibbonTabPage{ RibbonTabPage{
id: basic_page id: basic_page
title: qsTr("Basic") title: qsTr("Basic")
property var sliderLayout: getItem(0).sliderLayout
property var sliderWithBtn: getItem(0).sliderWithBtn
property var sliderWithoutBtn: getItem(0).sliderWithoutBtn
property var switchLayout: getItem(1).switchLayout
property var btnWithColorAndGrabberText: getItem(1).btnWithColorAndGrabberText
property var checkBoxLayout: getItem(2).checkBoxLayout
property var buttonLayout: getItem(3).buttonLayout
property var btnWithoutBgAndLabel: getItem(3).btnWithoutBgAndLabel
property var pushButtonLayout: getItem(4).pushButtonLayout
onContainerItemUpdated: {
if(getItem(0)){
sliderLayout = getItem(0).sliderLayout
sliderWithBtn = getItem(0).sliderWithBtn
sliderWithoutBtn = getItem(0).sliderWithoutBtn
switchLayout = getItem(1).switchLayout
btnWithColorAndGrabberText = getItem(1).btnWithColorAndGrabberText
checkBoxLayout = getItem(2).checkBoxLayout
buttonLayout = getItem(3).buttonLayout
btnWithoutBgAndLabel = getItem(3).btnWithoutBgAndLabel
pushButtonLayout = getItem(4).pushButtonLayout
}
}
RibbonTabGroup{ RibbonTabGroup{
property alias sliderLayout: slider_layout
property alias sliderWithBtn: slider_with_btn
property alias sliderWithoutBtn: slider_without_btn
showOpenExternal: true showOpenExternal: true
width: slider_layout.width + 20 width: slider_layout.width + 20
text: qsTr("Slider") text: qsTr("Slider")
@ -80,6 +108,8 @@ RibbonTabBar {
width: switch_layout.width + 30 width: switch_layout.width + 30
text: qsTr("Switch Button") text: qsTr("Switch Button")
showOpenExternal: true showOpenExternal: true
property alias switchLayout: switch_layout
property alias btnWithColorAndGrabberText: btn_with_color_and_grabberText
RowLayout{ RowLayout{
id: switch_layout id: switch_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -91,7 +121,6 @@ RibbonTabBar {
id: btn_with_color_and_grabberText id: btn_with_color_and_grabberText
text: "Button" text: "Button"
grabberCheckedColor: "red" grabberCheckedColor: "red"
checked: true
} }
RibbonSwitchButton{ RibbonSwitchButton{
text: "Button" text: "Button"
@ -129,6 +158,7 @@ RibbonTabBar {
width: checkbox_layout.width + 30 width: checkbox_layout.width + 30
text: qsTr("CheckBox") text: qsTr("CheckBox")
showOpenExternal: true showOpenExternal: true
property alias checkBoxLayout: checkbox_layout
RowLayout{ RowLayout{
id: checkbox_layout id: checkbox_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -165,6 +195,8 @@ RibbonTabBar {
width: button_layout.width + 30 width: button_layout.width + 30
text: qsTr("Button") text: qsTr("Button")
showOpenExternal: true showOpenExternal: true
property alias buttonLayout: button_layout
property alias btnWithoutBgAndLabel: btn_without_bg_and_label
RowLayout{ RowLayout{
id: button_layout id: button_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -233,6 +265,7 @@ RibbonTabBar {
RibbonTabGroup{ RibbonTabGroup{
width: pushbutton_layout.width + 30 width: pushbutton_layout.width + 30
text: qsTr("Push Button") text: qsTr("Push Button")
property alias pushButtonLayout: pushbutton_layout
RowLayout{ RowLayout{
id: pushbutton_layout id: pushbutton_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -294,10 +327,23 @@ RibbonTabBar {
} }
} }
RibbonTabPage{ RibbonTabPage{
id: input_page
title: qsTr("Input") title: qsTr("Input")
property var lineEditLayout: getItem(0).lineEditLayout
property var lineEditWithIcon: getItem(0).lineEditWithIcon
onContainerItemUpdated: {
if(getItem(0)){
lineEditLayout = getItem(0).lineEditLayout
lineEditWithIcon = getItem(0).lineEditWithIcon
}
}
RibbonTabGroup{ RibbonTabGroup{
width: lineedit_layout.width + 30 width: lineedit_layout.width + 30
text: qsTr("Line Edit") text: qsTr("Line Edit")
property alias lineEditLayout: lineedit_layout
property alias lineEditWithIcon: lineedit_with_icon
RowLayout{ RowLayout{
id: lineedit_layout id: lineedit_layout
anchors.centerIn: parent anchors.centerIn: parent
@ -327,7 +373,7 @@ RibbonTabBar {
} }
} }
RibbonTabGroup{ RibbonTabGroup{
width: lineedit_layout.width + 30 width: textedit_layout.width + 30
text: qsTr("Text Edit") text: qsTr("Text Edit")
RowLayout{ RowLayout{
id: textedit_layout id: textedit_layout