RibbonRadioButton: Added.

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")

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")

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}/")
 

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
+    }
+}

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
+    }
+}