diff --git a/example/qml/Qt5/example.qml b/example/qml/Qt5/example.qml index ffb295e..ce4e88c 100644 --- a/example/qml/Qt5/example.qml +++ b/example/qml/Qt5/example.qml @@ -79,7 +79,7 @@ RibbonWindow { exit_func: ()=>{ tab_bar.setPage(0) lineedit_with_icon.clear() - tour.refresh(300) + tour.refresh(400) } }, { @@ -355,6 +355,24 @@ RibbonWindow { } } } + RibbonTabGroup{ + width: radiobtn_layout.width + 30 + text: qsTr("Radio Button") + ColumnLayout{ + id: radiobtn_layout + anchors.centerIn: parent + height: parent.height + RibbonRadioButton{ + text: "Item A" + } + RibbonRadioButton{ + text: "Item B" + } + RibbonRadioButton{ + text: "Item C" + } + } + } } RibbonTabPage{ title: qsTr("Input") diff --git a/example/qml/Qt6/example.qml b/example/qml/Qt6/example.qml index b6b5ae9..8bc9bf6 100644 --- a/example/qml/Qt6/example.qml +++ b/example/qml/Qt6/example.qml @@ -79,7 +79,7 @@ RibbonWindow { exit_func: ()=>{ tab_bar.setPage(0) lineedit_with_icon.clear() - tour.refresh(300) + tour.refresh(400) } }, { @@ -355,6 +355,24 @@ RibbonWindow { } } } + RibbonTabGroup{ + width: radiobtn_layout.width + 30 + text: qsTr("Radio Button") + ColumnLayout{ + id: radiobtn_layout + anchors.centerIn: parent + height: parent.height + RibbonRadioButton{ + text: "Item A" + } + RibbonRadioButton{ + text: "Item B" + } + RibbonRadioButton{ + text: "Item C" + } + } + } } RibbonTabPage{ title: qsTr("Input") diff --git a/lib_source/CMakeLists.txt b/lib_source/CMakeLists.txt index a2b3bdd..3ffc40d 100644 --- a/lib_source/CMakeLists.txt +++ b/lib_source/CMakeLists.txt @@ -38,7 +38,8 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml RibbonComboBox.qml RibbonSpinBox.qml RibbonScrollIndicator.qml RibbonScrollBar.qml RibbonWindow.qml RibbonMessage.qml RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml - RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml) + RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml + RibbonRadioButton.qml) set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/") diff --git a/lib_source/qml/Qt5/RibbonRadioButton.qml b/lib_source/qml/Qt5/RibbonRadioButton.qml new file mode 100644 index 0000000..36ccc7d --- /dev/null +++ b/lib_source/qml/Qt5/RibbonRadioButton.qml @@ -0,0 +1,68 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import RibbonUI 1.0 + +RadioButton { + id: control + + property color labelColor: RibbonTheme.isDarkMode ? "white" : "black" + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + padding: 0 + spacing: 6 + + indicator: Rectangle { + implicitWidth: 16 + implicitHeight: implicitWidth + + x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 + y: control.topPadding + (control.availableHeight - height) / 2 + + radius: width / 2 + color: { + if(control.checked) + return RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#658EE5" : "#2C59B7" : RibbonTheme.isDarkMode ? "#2E4BB3" : "#2E4FB1" + return RibbonTheme.isDarkMode ? "black" : "white" + } + + border.width: (control.visualFocus ? 0.7 : 0.5) + (RibbonTheme.modernStyle ? 0.5 : 0) + border.color: RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#646463" : "#C8C7C7" : RibbonTheme.isDarkMode ? "#757575" : "#8A8A8A" + + Rectangle { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: parent.implicitWidth - RibbonTheme.modernStyle ? 7 : 8 + height: width + radius: width / 2 + color: RibbonTheme.isDarkMode ? "black" : "white" + visible: control.checked + } + + Rectangle{ + anchors.fill: parent + radius: width/2 + color: { + if(control.down) + return Qt.rgba(255,255,255,0.2) + if(control.hovered) + return Qt.rgba(255,255,255,0.1) + return 'transparent' + } + } + } + + contentItem: RibbonText { + viewOnly: true + leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + + text: control.text + font: control.font + color: control.labelColor + } +} diff --git a/lib_source/qml/Qt6/RibbonRadioButton.qml b/lib_source/qml/Qt6/RibbonRadioButton.qml new file mode 100644 index 0000000..5d05227 --- /dev/null +++ b/lib_source/qml/Qt6/RibbonRadioButton.qml @@ -0,0 +1,68 @@ +import QtQuick +import QtQuick.Controls +import RibbonUI + +RadioButton { + id: control + + property color labelColor: RibbonTheme.isDarkMode ? "white" : "black" + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + padding: 0 + spacing: 6 + + indicator: Rectangle { + implicitWidth: 16 + implicitHeight: implicitWidth + + x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 + y: control.topPadding + (control.availableHeight - height) / 2 + + radius: width / 2 + color: { + if(control.checked) + return RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#658EE5" : "#2C59B7" : RibbonTheme.isDarkMode ? "#2E4BB3" : "#2E4FB1" + return RibbonTheme.isDarkMode ? "black" : "white" + } + + border.width: (control.visualFocus ? 0.7 : 0.5) + (RibbonTheme.modernStyle ? 0.5 : 0) + border.color: RibbonTheme.modernStyle ? RibbonTheme.isDarkMode ? "#646463" : "#C8C7C7" : RibbonTheme.isDarkMode ? "#757575" : "#8A8A8A" + + Rectangle { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: parent.implicitWidth - RibbonTheme.modernStyle ? 7 : 8 + height: width + radius: width / 2 + color: RibbonTheme.isDarkMode ? "black" : "white" + visible: control.checked + } + + Rectangle{ + anchors.fill: parent + radius: width/2 + color: { + if(control.down) + return Qt.rgba(255,255,255,0.2) + if(control.hovered) + return Qt.rgba(255,255,255,0.1) + return 'transparent' + } + } + } + + contentItem: RibbonText { + viewOnly: true + leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + + text: control.text + font: control.font + color: control.labelColor + } +}