RibbonProgressRing: Added.
This commit is contained in:
parent
406bf535bf
commit
564cc8ebd2
GPG Key ID:
5AE68D4401A2EE71
|
|
@ -28,7 +28,8 @@ find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
|
||||||
find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Quick REQUIRED)
|
find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Quick REQUIRED)
|
||||||
|
|
||||||
set(sources_files example.cpp)
|
set(sources_files example.cpp)
|
||||||
set(qml_files example.qml about.qml components/RibbonMessageListViewExample.qml pages/SettingsMenuPage.qml)
|
set(qml_files example.qml about.qml components/RibbonMessageListViewExample.qml
|
||||||
|
pages/SettingsMenuPage.qml components/TabBar.qml)
|
||||||
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
|
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
|
||||||
list(TRANSFORM qml_files PREPEND ${qml_prefix})
|
list(TRANSFORM qml_files PREPEND ${qml_prefix})
|
||||||
foreach(qmlfile ${qml_files})
|
foreach(qmlfile ${qml_files})
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,725 @@
|
||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Layouts 1.11
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import RibbonUI 1.0
|
||||||
|
|
||||||
|
RibbonTabBar {
|
||||||
|
id: tab_bar
|
||||||
|
property alias tab_bar_tool: tab_bar_tool
|
||||||
|
property alias slider_layout: slider_layout
|
||||||
|
property alias slider_with_btn: slider_with_btn
|
||||||
|
property alias slider_without_btn: slider_without_btn
|
||||||
|
property alias switch_layout: switch_layout
|
||||||
|
property alias btn_with_color_and_grabberText: btn_with_color_and_grabberText
|
||||||
|
property alias checkbox_layout: checkbox_layout
|
||||||
|
property alias button_layout: button_layout
|
||||||
|
property alias btn_without_bg_and_label: btn_without_bg_and_label
|
||||||
|
property alias pushbutton_layout: pushbutton_layout
|
||||||
|
property alias lineedit_layout: lineedit_layout
|
||||||
|
property alias lineedit_with_icon: lineedit_with_icon
|
||||||
|
|
||||||
|
modernStyle: root.modernStyle
|
||||||
|
rightToolBar: RowLayout{
|
||||||
|
id: tab_bar_tool
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text:"Test Button 1"
|
||||||
|
iconSource: RibbonIcons.Alert
|
||||||
|
checkable: true
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Test Button 2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RibbonTabPage{
|
||||||
|
id: basic_page
|
||||||
|
title: qsTr("Basic")
|
||||||
|
RibbonTabGroup{
|
||||||
|
showOpenExternal: true
|
||||||
|
width: slider_layout.width + 20
|
||||||
|
text: qsTr("Slider")
|
||||||
|
RowLayout{
|
||||||
|
id: slider_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 0
|
||||||
|
RibbonSlider{
|
||||||
|
id: slider_with_btn
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
slideWidth: 40
|
||||||
|
horizontal: false
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
RibbonSlider{
|
||||||
|
id: slider_without_btn
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
slideWidth: 40
|
||||||
|
horizontal: false
|
||||||
|
showButton: false
|
||||||
|
value: 40
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 0
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
RibbonSlider{
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
slideWidth: 40
|
||||||
|
value: 60
|
||||||
|
}
|
||||||
|
RibbonSlider{
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
slideWidth: 40
|
||||||
|
showButton: false
|
||||||
|
value: 80
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: switch_layout.width + 30
|
||||||
|
text: qsTr("Switch Button")
|
||||||
|
showOpenExternal: true
|
||||||
|
RowLayout{
|
||||||
|
id: switch_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 0
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 5
|
||||||
|
RibbonSwitchButton{
|
||||||
|
id: btn_with_color_and_grabberText
|
||||||
|
text: "Button"
|
||||||
|
grabberCheckedColor: "red"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
text: "Button"
|
||||||
|
textOnLeft: true
|
||||||
|
grabberCheckedColor: "orange"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
grabberCheckedColor: "blue"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 5
|
||||||
|
RibbonSwitchButton{
|
||||||
|
text: "Button"
|
||||||
|
showGrabberText: false
|
||||||
|
grabberCheckedColor: "green"
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
text: "Button"
|
||||||
|
showGrabberText: false
|
||||||
|
textOnLeft: true
|
||||||
|
grabberCheckedColor: "indigo"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
showGrabberText: false
|
||||||
|
grabberCheckedColor: "yellow"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: checkbox_layout.width + 30
|
||||||
|
text: qsTr("CheckBox")
|
||||||
|
showOpenExternal: true
|
||||||
|
RowLayout{
|
||||||
|
id: checkbox_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 0
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonCheckBox{
|
||||||
|
text: "CheckBox"
|
||||||
|
iconFilledBgColor: "blue"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonCheckBox{
|
||||||
|
text: "CheckBox"
|
||||||
|
textOnLeft: true
|
||||||
|
iconFilledBgColor: "red"
|
||||||
|
}
|
||||||
|
RowLayout{
|
||||||
|
spacing: 30
|
||||||
|
RibbonCheckBox{
|
||||||
|
iconFilledBgColor:"orange"
|
||||||
|
tipText: "CheckBox"
|
||||||
|
showTooltip: true
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonCheckBox{
|
||||||
|
iconFilledBgColor:"purple"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: button_layout.width + 30
|
||||||
|
text: qsTr("Button")
|
||||||
|
showOpenExternal: true
|
||||||
|
RowLayout{
|
||||||
|
id: button_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 1
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
iconSource: RibbonIcons.Accessibility
|
||||||
|
checkable: true
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showTooltip: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Beaker
|
||||||
|
checkable: true
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showBg:false
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showBg:false
|
||||||
|
showTooltip: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
id: btn_without_bg_and_label
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Badge
|
||||||
|
iconSourceFilled: RibbonIcons_Filled.Badge
|
||||||
|
checkable: true
|
||||||
|
tipText: "Button"
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Clock
|
||||||
|
iconSourceFilled: RibbonIcons_Filled.Clock
|
||||||
|
tipText: "Button"
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Board
|
||||||
|
iconSourceFilled: RibbonIcons_Filled.Board
|
||||||
|
checkable: true
|
||||||
|
tipText: "Button"
|
||||||
|
showTooltip: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: pushbutton_layout.width + 30
|
||||||
|
text: qsTr("Push Button")
|
||||||
|
RowLayout{
|
||||||
|
id: pushbutton_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RibbonPushButton{
|
||||||
|
text: qsTr("No Menu")
|
||||||
|
iconSource: RibbonIcons.AttachText
|
||||||
|
}
|
||||||
|
RibbonPushButton{
|
||||||
|
id: push_btn_with_menu
|
||||||
|
text: qsTr("Menu")
|
||||||
|
iconSource: RibbonIcons.MeetNow
|
||||||
|
Action{
|
||||||
|
text: "Test Item 1"
|
||||||
|
}
|
||||||
|
RibbonMenuSeparator{}
|
||||||
|
Action{
|
||||||
|
text: "Test Item 2"
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonPushButton{
|
||||||
|
text: qsTr("No Menu")
|
||||||
|
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png"
|
||||||
|
iconSize: height-5
|
||||||
|
}
|
||||||
|
RibbonPushButton{
|
||||||
|
text: qsTr("Menu")
|
||||||
|
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png"
|
||||||
|
Action{
|
||||||
|
text: "Test Item 3"
|
||||||
|
}
|
||||||
|
RibbonMenuSeparator{}
|
||||||
|
Action{
|
||||||
|
text: "Test Item 4"
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: lineedit_layout.width + 30
|
||||||
|
text: qsTr("Line Edit")
|
||||||
|
RowLayout{
|
||||||
|
id: lineedit_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonLineEdit{
|
||||||
|
}
|
||||||
|
RibbonLineEdit{
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonLineEdit{
|
||||||
|
id: lineedit_with_icon
|
||||||
|
iconSource:RibbonIcons.Search
|
||||||
|
}
|
||||||
|
RibbonLineEdit{
|
||||||
|
iconSource:RibbonIcons.Keyboard
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: lineedit_layout.width + 30
|
||||||
|
text: qsTr("Text Edit")
|
||||||
|
RowLayout{
|
||||||
|
id: textedit_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 30
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 50
|
||||||
|
}
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 30
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 30
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 50
|
||||||
|
iconSource:RibbonIcons.Search
|
||||||
|
}
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 30
|
||||||
|
iconSource:RibbonIcons.Keyboard
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: combobox_layout.width + 30
|
||||||
|
text: qsTr("Combo Box")
|
||||||
|
RowLayout{
|
||||||
|
id: combobox_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonComboBox{
|
||||||
|
model: ListModel {
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonComboBox{
|
||||||
|
editable: true
|
||||||
|
model: ListModel {
|
||||||
|
id: model
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
onAccepted: {
|
||||||
|
if (find(editText) === -1 && editText)
|
||||||
|
model.append({text: editText})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonComboBox{
|
||||||
|
model: ListModel {
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
iconSource: RibbonIcons.Beaker
|
||||||
|
}
|
||||||
|
RibbonComboBox{
|
||||||
|
editable: true
|
||||||
|
model: ListModel {
|
||||||
|
id: model_1
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
iconSource: RibbonIcons.Calendar
|
||||||
|
onAccepted: {
|
||||||
|
if (find(editText) === -1 && editText)
|
||||||
|
model_1.append({text: editText})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: spinbox_layout.width + 30
|
||||||
|
text: qsTr("Spin Box")
|
||||||
|
showBorder: false
|
||||||
|
RowLayout{
|
||||||
|
id: spinbox_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonSpinBox{
|
||||||
|
width: 100
|
||||||
|
}
|
||||||
|
RibbonSpinBox{
|
||||||
|
id: spinbox
|
||||||
|
width: 80
|
||||||
|
iconSource: RibbonIcons.DataPie
|
||||||
|
validator: DoubleValidator {
|
||||||
|
bottom: Math.min(spinbox.from, spinbox.to)
|
||||||
|
top: Math.max(spinbox.from, spinbox.to)
|
||||||
|
decimals: 2
|
||||||
|
notation: DoubleValidator.StandardNotation
|
||||||
|
}
|
||||||
|
textFromValue: function(value, locale) {
|
||||||
|
return Number(value / 100).toLocaleString(locale, 'f', 2)
|
||||||
|
}
|
||||||
|
valueFromText: function(text, locale) {
|
||||||
|
return Math.round(Number.fromLocaleString(locale, text) * 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabPage{
|
||||||
|
title: qsTr("Progress")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: progressbar_slider.width + 30
|
||||||
|
RibbonSlider{
|
||||||
|
id: progressbar_slider
|
||||||
|
anchors.centerIn: parent
|
||||||
|
slideWidth: 40
|
||||||
|
horizontal: false
|
||||||
|
showButton: false
|
||||||
|
value: 40
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: progressbar_layout.width + 30
|
||||||
|
text: qsTr("ProgressBar")
|
||||||
|
RowLayout{
|
||||||
|
id: progressbar_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
showText: false
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: false
|
||||||
|
showText: false
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: progressring_layout.width + 30
|
||||||
|
text: qsTr("ProgressRing")
|
||||||
|
RowLayout{
|
||||||
|
id: progressring_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RowLayout{
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
centerInTextLabel: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RowLayout{
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
indeterminate: true
|
||||||
|
centerInTextLabel: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
showText: false
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: false
|
||||||
|
showText: false
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabPage{
|
||||||
|
title: qsTr("Views")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: message_list_view_layout.width + 30
|
||||||
|
text: qsTr("MessageListView")
|
||||||
|
RowLayout{
|
||||||
|
id: message_list_view_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr('Open Message List View')
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: {
|
||||||
|
Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabPage{
|
||||||
|
title: qsTr("Others")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: text_layout.width + 30
|
||||||
|
text: qsTr("Text")
|
||||||
|
RowLayout{
|
||||||
|
id: text_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonText{
|
||||||
|
font.pixelSize: 13
|
||||||
|
text: "Test Text"
|
||||||
|
}
|
||||||
|
RibbonText{
|
||||||
|
font.pixelSize: 13
|
||||||
|
text: "Test Text (Read Only)"
|
||||||
|
viewOnly: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: menu_layout.width + 30
|
||||||
|
text: qsTr("Menu")
|
||||||
|
RowLayout{
|
||||||
|
id: menu_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Menu")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: menu.popup()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: popup_layout.width + 30
|
||||||
|
text: qsTr("Popup")
|
||||||
|
RowLayout{
|
||||||
|
id: popup_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Popup")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: popup.open()
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Popup Dialog (Double Choices)")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: {
|
||||||
|
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton
|
||||||
|
dialog.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Popup Dialog (Triple Choices)")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: {
|
||||||
|
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
|
||||||
|
dialog.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonPopup{
|
||||||
|
id: popup
|
||||||
|
height: 200
|
||||||
|
width: height
|
||||||
|
target: windowItems
|
||||||
|
blurEnabled: true
|
||||||
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
||||||
|
}
|
||||||
|
RibbonPopupDialog{
|
||||||
|
id: dialog
|
||||||
|
target: windowItems
|
||||||
|
blurEnabled: true
|
||||||
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
|
||||||
import QtQuick.Layouts 1.11
|
import QtQuick.Layouts 1.11
|
||||||
import QtQuick.Window 2.15
|
import QtQuick.Window 2.15
|
||||||
import RibbonUI 1.0
|
import RibbonUI 1.0
|
||||||
|
import "components"
|
||||||
|
|
||||||
RibbonWindow {
|
RibbonWindow {
|
||||||
id:root
|
id:root
|
||||||
|
|
@ -25,59 +26,59 @@ RibbonWindow {
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Tab Bar Buttons")
|
title: qsTr("Tab Bar Buttons")
|
||||||
text: qsTr("Tool buttons at the top of tab bar.")
|
text: qsTr("Tool buttons at the top of tab bar.")
|
||||||
target: tab_bar_tool
|
target: tab_bar.tab_bar_tool
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Sliders")
|
title: qsTr("Sliders")
|
||||||
text: qsTr("Vertical/Horizental sliders with/without buttons.")
|
text: qsTr("Vertical/Horizental sliders with/without buttons.")
|
||||||
target: slider_layout
|
target: tab_bar.slider_layout
|
||||||
enterFunc: ()=>{
|
enterFunc: ()=>{
|
||||||
tab_bar.setPage(0)
|
tab_bar.setPage(0)
|
||||||
slider_with_btn.value = 70
|
tab_bar.slider_with_btn.value = 70
|
||||||
slider_without_btn.value = 70
|
tab_bar.slider_without_btn.value = 70
|
||||||
tour.refresh(500)
|
tour.refresh(500)
|
||||||
}
|
}
|
||||||
exitFunc: ()=>{
|
exitFunc: ()=>{
|
||||||
slider_with_btn.value = 50
|
tab_bar.slider_with_btn.value = 50
|
||||||
slider_without_btn.value = 50
|
tab_bar.slider_without_btn.value = 50
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Switch Buttons")
|
title: qsTr("Switch Buttons")
|
||||||
text: qsTr("Switch buttons with/without background color or grabber text.")
|
text: qsTr("Switch buttons with/without background color or grabber text.")
|
||||||
target: switch_layout
|
target: tab_bar.switch_layout
|
||||||
enterFunc: ()=>btn_with_color_and_grabberText.checked = true
|
enterFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = true
|
||||||
exitFunc: ()=>btn_with_color_and_grabberText.checked = false
|
exitFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = false
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("CheckBoxs")
|
title: qsTr("CheckBoxs")
|
||||||
text: qsTr("CheckBoxs with colorful background or with/without label text.")
|
text: qsTr("CheckBoxs with colorful background or with/without label text.")
|
||||||
target: checkbox_layout
|
target: tab_bar.checkbox_layout
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Buttons")
|
title: qsTr("Buttons")
|
||||||
text: qsTr("Buttons with/without background or label text.")
|
text: qsTr("Buttons with/without background or label text.")
|
||||||
target: button_layout
|
target: tab_bar.button_layout
|
||||||
enterFunc: ()=>btn_without_bg_and_label.checked = true
|
enterFunc: ()=>tab_bar.btn_without_bg_and_label.checked = true
|
||||||
exitFunc: ()=>btn_without_bg_and_label.checked = false
|
exitFunc: ()=>tab_bar.btn_without_bg_and_label.checked = false
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Push Buttons")
|
title: qsTr("Push Buttons")
|
||||||
text: qsTr("Push buttons with/without sub menu.")
|
text: qsTr("Push buttons with/without sub menu.")
|
||||||
target: pushbutton_layout
|
target: tab_bar.pushbutton_layout
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Line Edits")
|
title: qsTr("Line Edits")
|
||||||
text: qsTr("Line edits with/without icon.")
|
text: qsTr("Line edits with/without icon.")
|
||||||
target: lineedit_layout
|
target: tab_bar.lineedit_layout
|
||||||
enterFunc: ()=>{
|
enterFunc: ()=>{
|
||||||
tab_bar.setPage(1)
|
tab_bar.setPage(1)
|
||||||
lineedit_with_icon.text = "Line Edit with icon."
|
tab_bar.lineedit_with_icon.text = "Line Edit with icon."
|
||||||
tour.refresh(300)
|
tour.refresh(300)
|
||||||
}
|
}
|
||||||
exitFunc: ()=>{
|
exitFunc: ()=>{
|
||||||
tab_bar.setPage(0)
|
tab_bar.setPage(0)
|
||||||
lineedit_with_icon.clear()
|
tab_bar.lineedit_with_icon.clear()
|
||||||
tour.refresh(400)
|
tour.refresh(400)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -91,638 +92,12 @@ RibbonWindow {
|
||||||
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
||||||
}
|
}
|
||||||
Component.onCompleted: tour.open()
|
Component.onCompleted: tour.open()
|
||||||
RibbonTabBar {
|
|
||||||
id: tab_bar
|
|
||||||
modernStyle: root.modernStyle
|
|
||||||
rightToolBar: RowLayout{
|
|
||||||
id: tab_bar_tool
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text:"Test Button 1"
|
|
||||||
iconSource: RibbonIcons.Alert
|
|
||||||
checkable: true
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Test Button 2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
TabBar{
|
||||||
|
id: tab_bar
|
||||||
onSettingsBtnClicked:{
|
onSettingsBtnClicked:{
|
||||||
backstagepopup.open()
|
backstagepopup.open()
|
||||||
}
|
}
|
||||||
|
|
||||||
RibbonTabPage{
|
|
||||||
id: basic_page
|
|
||||||
title: qsTr("Basic")
|
|
||||||
RibbonTabGroup{
|
|
||||||
showOpenExternal: true
|
|
||||||
width: slider_layout.width + 20
|
|
||||||
text: qsTr("Slider")
|
|
||||||
RowLayout{
|
|
||||||
id: slider_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 0
|
|
||||||
RibbonSlider{
|
|
||||||
id: slider_with_btn
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
slideWidth: 40
|
|
||||||
horizontal: false
|
|
||||||
value: 20
|
|
||||||
}
|
|
||||||
RibbonSlider{
|
|
||||||
id: slider_without_btn
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
slideWidth: 40
|
|
||||||
horizontal: false
|
|
||||||
showButton: false
|
|
||||||
value: 40
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 0
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
RibbonSlider{
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
slideWidth: 40
|
|
||||||
value: 60
|
|
||||||
}
|
|
||||||
RibbonSlider{
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
slideWidth: 40
|
|
||||||
showButton: false
|
|
||||||
value: 80
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: switch_layout.width + 30
|
|
||||||
text: qsTr("Switch Button")
|
|
||||||
showOpenExternal: true
|
|
||||||
RowLayout{
|
|
||||||
id: switch_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 0
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 5
|
|
||||||
RibbonSwitchButton{
|
|
||||||
id: btn_with_color_and_grabberText
|
|
||||||
text: "Button"
|
|
||||||
grabberCheckedColor: "red"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
text: "Button"
|
|
||||||
textOnLeft: true
|
|
||||||
grabberCheckedColor: "orange"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
grabberCheckedColor: "blue"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 5
|
|
||||||
RibbonSwitchButton{
|
|
||||||
text: "Button"
|
|
||||||
showGrabberText: false
|
|
||||||
grabberCheckedColor: "green"
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
text: "Button"
|
|
||||||
showGrabberText: false
|
|
||||||
textOnLeft: true
|
|
||||||
grabberCheckedColor: "indigo"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
showGrabberText: false
|
|
||||||
grabberCheckedColor: "yellow"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: checkbox_layout.width + 30
|
|
||||||
text: qsTr("CheckBox")
|
|
||||||
showOpenExternal: true
|
|
||||||
RowLayout{
|
|
||||||
id: checkbox_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 0
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonCheckBox{
|
|
||||||
text: "CheckBox"
|
|
||||||
iconFilledBgColor: "blue"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonCheckBox{
|
|
||||||
text: "CheckBox"
|
|
||||||
textOnLeft: true
|
|
||||||
iconFilledBgColor: "red"
|
|
||||||
}
|
|
||||||
RowLayout{
|
|
||||||
spacing: 30
|
|
||||||
RibbonCheckBox{
|
|
||||||
iconFilledBgColor:"orange"
|
|
||||||
tipText: "CheckBox"
|
|
||||||
showTooltip: true
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonCheckBox{
|
|
||||||
iconFilledBgColor:"purple"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: button_layout.width + 30
|
|
||||||
text: qsTr("Button")
|
|
||||||
showOpenExternal: true
|
|
||||||
RowLayout{
|
|
||||||
id: button_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 1
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
iconSource: RibbonIcons.Accessibility
|
|
||||||
checkable: true
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showTooltip: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Beaker
|
|
||||||
checkable: true
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showBg:false
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showBg:false
|
|
||||||
showTooltip: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
id: btn_without_bg_and_label
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Badge
|
|
||||||
iconSourceFilled: RibbonIcons_Filled.Badge
|
|
||||||
checkable: true
|
|
||||||
tipText: "Button"
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Clock
|
|
||||||
iconSourceFilled: RibbonIcons_Filled.Clock
|
|
||||||
tipText: "Button"
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Board
|
|
||||||
iconSourceFilled: RibbonIcons_Filled.Board
|
|
||||||
checkable: true
|
|
||||||
tipText: "Button"
|
|
||||||
showTooltip: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: pushbutton_layout.width + 30
|
|
||||||
text: qsTr("Push Button")
|
|
||||||
RowLayout{
|
|
||||||
id: pushbutton_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
RibbonPushButton{
|
|
||||||
text: qsTr("No Menu")
|
|
||||||
iconSource: RibbonIcons.AttachText
|
|
||||||
}
|
|
||||||
RibbonPushButton{
|
|
||||||
id: push_btn_with_menu
|
|
||||||
text: qsTr("Menu")
|
|
||||||
iconSource: RibbonIcons.MeetNow
|
|
||||||
Action{
|
|
||||||
text: "Test Item 1"
|
|
||||||
}
|
|
||||||
RibbonMenuSeparator{}
|
|
||||||
Action{
|
|
||||||
text: "Test Item 2"
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonPushButton{
|
|
||||||
text: qsTr("No Menu")
|
|
||||||
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png"
|
|
||||||
iconSize: height-5
|
|
||||||
}
|
|
||||||
RibbonPushButton{
|
|
||||||
text: qsTr("Menu")
|
|
||||||
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png"
|
|
||||||
Action{
|
|
||||||
text: "Test Item 3"
|
|
||||||
}
|
|
||||||
RibbonMenuSeparator{}
|
|
||||||
Action{
|
|
||||||
text: "Test Item 4"
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: lineedit_layout.width + 30
|
|
||||||
text: qsTr("Line Edit")
|
|
||||||
RowLayout{
|
|
||||||
id: lineedit_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonLineEdit{
|
|
||||||
}
|
|
||||||
RibbonLineEdit{
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonLineEdit{
|
|
||||||
id: lineedit_with_icon
|
|
||||||
iconSource:RibbonIcons.Search
|
|
||||||
}
|
|
||||||
RibbonLineEdit{
|
|
||||||
iconSource:RibbonIcons.Keyboard
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: lineedit_layout.width + 30
|
|
||||||
text: qsTr("Text Edit")
|
|
||||||
RowLayout{
|
|
||||||
id: textedit_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 30
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 50
|
|
||||||
}
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 30
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 30
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 50
|
|
||||||
iconSource:RibbonIcons.Search
|
|
||||||
}
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 30
|
|
||||||
iconSource:RibbonIcons.Keyboard
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: combobox_layout.width + 30
|
|
||||||
text: qsTr("Combo Box")
|
|
||||||
RowLayout{
|
|
||||||
id: combobox_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonComboBox{
|
|
||||||
model: ListModel {
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonComboBox{
|
|
||||||
editable: true
|
|
||||||
model: ListModel {
|
|
||||||
id: model
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
onAccepted: {
|
|
||||||
if (find(editText) === -1 && editText)
|
|
||||||
model.append({text: editText})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonComboBox{
|
|
||||||
model: ListModel {
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
iconSource: RibbonIcons.Beaker
|
|
||||||
}
|
|
||||||
RibbonComboBox{
|
|
||||||
editable: true
|
|
||||||
model: ListModel {
|
|
||||||
id: model_1
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
iconSource: RibbonIcons.Calendar
|
|
||||||
onAccepted: {
|
|
||||||
if (find(editText) === -1 && editText)
|
|
||||||
model_1.append({text: editText})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: spinbox_layout.width + 30
|
|
||||||
text: qsTr("Spin Box")
|
|
||||||
showBorder: false
|
|
||||||
RowLayout{
|
|
||||||
id: spinbox_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonSpinBox{
|
|
||||||
width: 100
|
|
||||||
}
|
|
||||||
RibbonSpinBox{
|
|
||||||
id: spinbox
|
|
||||||
width: 80
|
|
||||||
iconSource: RibbonIcons.DataPie
|
|
||||||
validator: DoubleValidator {
|
|
||||||
bottom: Math.min(spinbox.from, spinbox.to)
|
|
||||||
top: Math.max(spinbox.from, spinbox.to)
|
|
||||||
decimals: 2
|
|
||||||
notation: DoubleValidator.StandardNotation
|
|
||||||
}
|
|
||||||
textFromValue: function(value, locale) {
|
|
||||||
return Number(value / 100).toLocaleString(locale, 'f', 2)
|
|
||||||
}
|
|
||||||
valueFromText: function(text, locale) {
|
|
||||||
return Math.round(Number.fromLocaleString(locale, text) * 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabPage{
|
|
||||||
title: qsTr("Progress")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: progressbar_layout.width + 30
|
|
||||||
text: qsTr("ProgressBar")
|
|
||||||
RowLayout{
|
|
||||||
id: progressbar_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonSlider{
|
|
||||||
id: progressbar_slider
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
slideWidth: 40
|
|
||||||
horizontal: false
|
|
||||||
showButton: false
|
|
||||||
value: 40
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
showText: false
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: false
|
|
||||||
showText: false
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabPage{
|
|
||||||
title: qsTr("Views")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: message_list_view_layout.width + 30
|
|
||||||
text: qsTr("MessageListView")
|
|
||||||
RowLayout{
|
|
||||||
id: message_list_view_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr('Open Message List View')
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: {
|
|
||||||
Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabPage{
|
|
||||||
title: qsTr("Others")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: text_layout.width + 30
|
|
||||||
text: qsTr("Text")
|
|
||||||
RowLayout{
|
|
||||||
id: text_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonText{
|
|
||||||
font.pixelSize: 13
|
|
||||||
text: "Test Text"
|
|
||||||
}
|
|
||||||
RibbonText{
|
|
||||||
font.pixelSize: 13
|
|
||||||
text: "Test Text (Read Only)"
|
|
||||||
viewOnly: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: menu_layout.width + 30
|
|
||||||
text: qsTr("Menu")
|
|
||||||
RowLayout{
|
|
||||||
id: menu_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Menu")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: menu.popup()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: popup_layout.width + 30
|
|
||||||
text: qsTr("Popup")
|
|
||||||
RowLayout{
|
|
||||||
id: popup_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Popup")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: popup.open()
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Popup Dialog (Double Choices)")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: {
|
|
||||||
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton
|
|
||||||
dialog.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Popup Dialog (Triple Choices)")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: {
|
|
||||||
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
|
|
||||||
dialog.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonPopup{
|
|
||||||
id: popup
|
|
||||||
height: 200
|
|
||||||
width: height
|
|
||||||
target: windowItems
|
|
||||||
blurEnabled: true
|
|
||||||
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
|
||||||
}
|
|
||||||
RibbonPopupDialog{
|
|
||||||
id: dialog
|
|
||||||
target: windowItems
|
|
||||||
blurEnabled: true
|
|
||||||
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RibbonPaperView{
|
RibbonPaperView{
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,725 @@
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import QtQuick.Controls
|
||||||
|
import RibbonUI
|
||||||
|
|
||||||
|
RibbonTabBar {
|
||||||
|
id: tab_bar
|
||||||
|
property alias tab_bar_tool: tab_bar_tool
|
||||||
|
property alias slider_layout: slider_layout
|
||||||
|
property alias slider_with_btn: slider_with_btn
|
||||||
|
property alias slider_without_btn: slider_without_btn
|
||||||
|
property alias switch_layout: switch_layout
|
||||||
|
property alias btn_with_color_and_grabberText: btn_with_color_and_grabberText
|
||||||
|
property alias checkbox_layout: checkbox_layout
|
||||||
|
property alias button_layout: button_layout
|
||||||
|
property alias btn_without_bg_and_label: btn_without_bg_and_label
|
||||||
|
property alias pushbutton_layout: pushbutton_layout
|
||||||
|
property alias lineedit_layout: lineedit_layout
|
||||||
|
property alias lineedit_with_icon: lineedit_with_icon
|
||||||
|
|
||||||
|
modernStyle: root.modernStyle
|
||||||
|
rightToolBar: RowLayout{
|
||||||
|
id: tab_bar_tool
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text:"Test Button 1"
|
||||||
|
iconSource: RibbonIcons.Alert
|
||||||
|
checkable: true
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Test Button 2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RibbonTabPage{
|
||||||
|
id: basic_page
|
||||||
|
title: qsTr("Basic")
|
||||||
|
RibbonTabGroup{
|
||||||
|
showOpenExternal: true
|
||||||
|
width: slider_layout.width + 20
|
||||||
|
text: qsTr("Slider")
|
||||||
|
RowLayout{
|
||||||
|
id: slider_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 0
|
||||||
|
RibbonSlider{
|
||||||
|
id: slider_with_btn
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
slideWidth: 40
|
||||||
|
horizontal: false
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
RibbonSlider{
|
||||||
|
id: slider_without_btn
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
slideWidth: 40
|
||||||
|
horizontal: false
|
||||||
|
showButton: false
|
||||||
|
value: 40
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 0
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
RibbonSlider{
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
slideWidth: 40
|
||||||
|
value: 60
|
||||||
|
}
|
||||||
|
RibbonSlider{
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
slideWidth: 40
|
||||||
|
showButton: false
|
||||||
|
value: 80
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: switch_layout.width + 30
|
||||||
|
text: qsTr("Switch Button")
|
||||||
|
showOpenExternal: true
|
||||||
|
RowLayout{
|
||||||
|
id: switch_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 0
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 5
|
||||||
|
RibbonSwitchButton{
|
||||||
|
id: btn_with_color_and_grabberText
|
||||||
|
text: "Button"
|
||||||
|
grabberCheckedColor: "red"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
text: "Button"
|
||||||
|
textOnLeft: true
|
||||||
|
grabberCheckedColor: "orange"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
grabberCheckedColor: "blue"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 5
|
||||||
|
RibbonSwitchButton{
|
||||||
|
text: "Button"
|
||||||
|
showGrabberText: false
|
||||||
|
grabberCheckedColor: "green"
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
text: "Button"
|
||||||
|
showGrabberText: false
|
||||||
|
textOnLeft: true
|
||||||
|
grabberCheckedColor: "indigo"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonSwitchButton{
|
||||||
|
showGrabberText: false
|
||||||
|
grabberCheckedColor: "yellow"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: checkbox_layout.width + 30
|
||||||
|
text: qsTr("CheckBox")
|
||||||
|
showOpenExternal: true
|
||||||
|
RowLayout{
|
||||||
|
id: checkbox_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 0
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonCheckBox{
|
||||||
|
text: "CheckBox"
|
||||||
|
iconFilledBgColor: "blue"
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonCheckBox{
|
||||||
|
text: "CheckBox"
|
||||||
|
textOnLeft: true
|
||||||
|
iconFilledBgColor: "red"
|
||||||
|
}
|
||||||
|
RowLayout{
|
||||||
|
spacing: 30
|
||||||
|
RibbonCheckBox{
|
||||||
|
iconFilledBgColor:"orange"
|
||||||
|
tipText: "CheckBox"
|
||||||
|
showTooltip: true
|
||||||
|
checked: true
|
||||||
|
}
|
||||||
|
RibbonCheckBox{
|
||||||
|
iconFilledBgColor:"purple"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: button_layout.width + 30
|
||||||
|
text: qsTr("Button")
|
||||||
|
showOpenExternal: true
|
||||||
|
RowLayout{
|
||||||
|
id: button_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 1
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
iconSource: RibbonIcons.Accessibility
|
||||||
|
checkable: true
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showTooltip: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Beaker
|
||||||
|
checkable: true
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showBg:false
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text:"Button"
|
||||||
|
showBg:false
|
||||||
|
showTooltip: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
id: btn_without_bg_and_label
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Badge
|
||||||
|
iconSourceFilled: RibbonIcons_Filled.Badge
|
||||||
|
checkable: true
|
||||||
|
tipText: "Button"
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Clock
|
||||||
|
iconSourceFilled: RibbonIcons_Filled.Clock
|
||||||
|
tipText: "Button"
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
showBg:false
|
||||||
|
iconSource: RibbonIcons.Board
|
||||||
|
iconSourceFilled: RibbonIcons_Filled.Board
|
||||||
|
checkable: true
|
||||||
|
tipText: "Button"
|
||||||
|
showTooltip: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: pushbutton_layout.width + 30
|
||||||
|
text: qsTr("Push Button")
|
||||||
|
RowLayout{
|
||||||
|
id: pushbutton_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RibbonPushButton{
|
||||||
|
text: qsTr("No Menu")
|
||||||
|
iconSource: RibbonIcons.AttachText
|
||||||
|
}
|
||||||
|
RibbonPushButton{
|
||||||
|
id: push_btn_with_menu
|
||||||
|
text: qsTr("Menu")
|
||||||
|
iconSource: RibbonIcons.MeetNow
|
||||||
|
Action{
|
||||||
|
text: "Test Item 1"
|
||||||
|
}
|
||||||
|
RibbonMenuSeparator{}
|
||||||
|
Action{
|
||||||
|
text: "Test Item 2"
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonPushButton{
|
||||||
|
text: qsTr("No Menu")
|
||||||
|
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png"
|
||||||
|
iconSize: height-5
|
||||||
|
}
|
||||||
|
RibbonPushButton{
|
||||||
|
text: qsTr("Menu")
|
||||||
|
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png"
|
||||||
|
Action{
|
||||||
|
text: "Test Item 3"
|
||||||
|
}
|
||||||
|
RibbonMenuSeparator{}
|
||||||
|
Action{
|
||||||
|
text: "Test Item 4"
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: lineedit_layout.width + 30
|
||||||
|
text: qsTr("Line Edit")
|
||||||
|
RowLayout{
|
||||||
|
id: lineedit_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonLineEdit{
|
||||||
|
}
|
||||||
|
RibbonLineEdit{
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonLineEdit{
|
||||||
|
id: lineedit_with_icon
|
||||||
|
iconSource:RibbonIcons.Search
|
||||||
|
}
|
||||||
|
RibbonLineEdit{
|
||||||
|
iconSource:RibbonIcons.Keyboard
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: lineedit_layout.width + 30
|
||||||
|
text: qsTr("Text Edit")
|
||||||
|
RowLayout{
|
||||||
|
id: textedit_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 30
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 50
|
||||||
|
}
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 30
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 30
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 50
|
||||||
|
iconSource:RibbonIcons.Search
|
||||||
|
}
|
||||||
|
RibbonTextEdit{
|
||||||
|
maxHeight: 30
|
||||||
|
iconSource:RibbonIcons.Keyboard
|
||||||
|
showClearBtn:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: combobox_layout.width + 30
|
||||||
|
text: qsTr("Combo Box")
|
||||||
|
RowLayout{
|
||||||
|
id: combobox_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonComboBox{
|
||||||
|
model: ListModel {
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonComboBox{
|
||||||
|
editable: true
|
||||||
|
model: ListModel {
|
||||||
|
id: model
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
onAccepted: {
|
||||||
|
if (find(editText) === -1 && editText)
|
||||||
|
model.append({text: editText})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonComboBox{
|
||||||
|
model: ListModel {
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
iconSource: RibbonIcons.Beaker
|
||||||
|
}
|
||||||
|
RibbonComboBox{
|
||||||
|
editable: true
|
||||||
|
model: ListModel {
|
||||||
|
id: model_1
|
||||||
|
ListElement { text: "Test Item 1" }
|
||||||
|
ListElement { text: "Test Item 2" }
|
||||||
|
ListElement { text: "Test Item 3" }
|
||||||
|
}
|
||||||
|
iconSource: RibbonIcons.Calendar
|
||||||
|
onAccepted: {
|
||||||
|
if (find(editText) === -1 && editText)
|
||||||
|
model_1.append({text: editText})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: spinbox_layout.width + 30
|
||||||
|
text: qsTr("Spin Box")
|
||||||
|
showBorder: false
|
||||||
|
RowLayout{
|
||||||
|
id: spinbox_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonSpinBox{
|
||||||
|
width: 100
|
||||||
|
}
|
||||||
|
RibbonSpinBox{
|
||||||
|
id: spinbox
|
||||||
|
width: 80
|
||||||
|
iconSource: RibbonIcons.DataPie
|
||||||
|
validator: DoubleValidator {
|
||||||
|
bottom: Math.min(spinbox.from, spinbox.to)
|
||||||
|
top: Math.max(spinbox.from, spinbox.to)
|
||||||
|
decimals: 2
|
||||||
|
notation: DoubleValidator.StandardNotation
|
||||||
|
}
|
||||||
|
textFromValue: function(value, locale) {
|
||||||
|
return Number(value / 100).toLocaleString(locale, 'f', 2)
|
||||||
|
}
|
||||||
|
valueFromText: function(text, locale) {
|
||||||
|
return Math.round(Number.fromLocaleString(locale, text) * 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabPage{
|
||||||
|
title: qsTr("Progress")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: progressbar_slider.width + 30
|
||||||
|
RibbonSlider{
|
||||||
|
id: progressbar_slider
|
||||||
|
anchors.centerIn: parent
|
||||||
|
slideWidth: 40
|
||||||
|
horizontal: false
|
||||||
|
showButton: false
|
||||||
|
value: 40
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: progressbar_layout.width + 30
|
||||||
|
text: qsTr("ProgressBar")
|
||||||
|
RowLayout{
|
||||||
|
id: progressbar_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: true
|
||||||
|
showText: false
|
||||||
|
}
|
||||||
|
RibbonProgressBar{
|
||||||
|
barWidth: 100
|
||||||
|
indeterminate: false
|
||||||
|
showText: false
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: progressring_layout.width + 30
|
||||||
|
text: qsTr("ProgressRing")
|
||||||
|
RowLayout{
|
||||||
|
id: progressring_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RowLayout{
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
centerInTextLabel: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RowLayout{
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
indeterminate: true
|
||||||
|
centerInTextLabel: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ColumnLayout{
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: true
|
||||||
|
showText: false
|
||||||
|
}
|
||||||
|
RibbonProgressRing{
|
||||||
|
barWidth: 30
|
||||||
|
indeterminate: false
|
||||||
|
showText: false
|
||||||
|
value: progressbar_slider.value / 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabPage{
|
||||||
|
title: qsTr("Views")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: message_list_view_layout.width + 30
|
||||||
|
text: qsTr("MessageListView")
|
||||||
|
RowLayout{
|
||||||
|
id: message_list_view_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr('Open Message List View')
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: {
|
||||||
|
Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabPage{
|
||||||
|
title: qsTr("Others")
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: text_layout.width + 30
|
||||||
|
text: qsTr("Text")
|
||||||
|
RowLayout{
|
||||||
|
id: text_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonText{
|
||||||
|
font.pixelSize: 13
|
||||||
|
text: "Test Text"
|
||||||
|
}
|
||||||
|
RibbonText{
|
||||||
|
font.pixelSize: 13
|
||||||
|
text: "Test Text (Read Only)"
|
||||||
|
viewOnly: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: menu_layout.width + 30
|
||||||
|
text: qsTr("Menu")
|
||||||
|
RowLayout{
|
||||||
|
id: menu_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Menu")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: menu.popup()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonTabGroup{
|
||||||
|
width: popup_layout.width + 30
|
||||||
|
text: qsTr("Popup")
|
||||||
|
RowLayout{
|
||||||
|
id: popup_layout
|
||||||
|
anchors.centerIn: parent
|
||||||
|
height: parent.height
|
||||||
|
spacing: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 10
|
||||||
|
Layout.fillHeight: true
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Popup")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: popup.open()
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Popup Dialog (Double Choices)")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: {
|
||||||
|
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton
|
||||||
|
dialog.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonButton{
|
||||||
|
text: qsTr("Open Popup Dialog (Triple Choices)")
|
||||||
|
iconSource: RibbonIcons.Open
|
||||||
|
onClicked: {
|
||||||
|
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
|
||||||
|
dialog.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RibbonPopup{
|
||||||
|
id: popup
|
||||||
|
height: 200
|
||||||
|
width: height
|
||||||
|
target: windowItems
|
||||||
|
blurEnabled: true
|
||||||
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
||||||
|
}
|
||||||
|
RibbonPopupDialog{
|
||||||
|
id: dialog
|
||||||
|
target: windowItems
|
||||||
|
blurEnabled: true
|
||||||
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import RibbonUI
|
import RibbonUI
|
||||||
|
import "components"
|
||||||
|
|
||||||
RibbonWindow {
|
RibbonWindow {
|
||||||
id:root
|
id:root
|
||||||
|
|
@ -25,59 +26,59 @@ RibbonWindow {
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Tab Bar Buttons")
|
title: qsTr("Tab Bar Buttons")
|
||||||
text: qsTr("Tool buttons at the top of tab bar.")
|
text: qsTr("Tool buttons at the top of tab bar.")
|
||||||
target: tab_bar_tool
|
target: tab_bar.tab_bar_tool
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Sliders")
|
title: qsTr("Sliders")
|
||||||
text: qsTr("Vertical/Horizental sliders with/without buttons.")
|
text: qsTr("Vertical/Horizental sliders with/without buttons.")
|
||||||
target: slider_layout
|
target: tab_bar.slider_layout
|
||||||
enterFunc: ()=>{
|
enterFunc: ()=>{
|
||||||
tab_bar.setPage(0)
|
tab_bar.setPage(0)
|
||||||
slider_with_btn.value = 70
|
tab_bar.slider_with_btn.value = 70
|
||||||
slider_without_btn.value = 70
|
tab_bar.slider_without_btn.value = 70
|
||||||
tour.refresh(500)
|
tour.refresh(500)
|
||||||
}
|
}
|
||||||
exitFunc: ()=>{
|
exitFunc: ()=>{
|
||||||
slider_with_btn.value = 50
|
tab_bar.slider_with_btn.value = 50
|
||||||
slider_without_btn.value = 50
|
tab_bar.slider_without_btn.value = 50
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Switch Buttons")
|
title: qsTr("Switch Buttons")
|
||||||
text: qsTr("Switch buttons with/without background color or grabber text.")
|
text: qsTr("Switch buttons with/without background color or grabber text.")
|
||||||
target: switch_layout
|
target: tab_bar.switch_layout
|
||||||
enterFunc: ()=>btn_with_color_and_grabberText.checked = true
|
enterFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = true
|
||||||
exitFunc: ()=>btn_with_color_and_grabberText.checked = false
|
exitFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = false
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("CheckBoxs")
|
title: qsTr("CheckBoxs")
|
||||||
text: qsTr("CheckBoxs with colorful background or with/without label text.")
|
text: qsTr("CheckBoxs with colorful background or with/without label text.")
|
||||||
target: checkbox_layout
|
target: tab_bar.checkbox_layout
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Buttons")
|
title: qsTr("Buttons")
|
||||||
text: qsTr("Buttons with/without background or label text.")
|
text: qsTr("Buttons with/without background or label text.")
|
||||||
target: button_layout
|
target: tab_bar.button_layout
|
||||||
enterFunc: ()=>btn_without_bg_and_label.checked = true
|
enterFunc: ()=>tab_bar.btn_without_bg_and_label.checked = true
|
||||||
exitFunc: ()=>btn_without_bg_and_label.checked = false
|
exitFunc: ()=>tab_bar.btn_without_bg_and_label.checked = false
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Push Buttons")
|
title: qsTr("Push Buttons")
|
||||||
text: qsTr("Push buttons with/without sub menu.")
|
text: qsTr("Push buttons with/without sub menu.")
|
||||||
target: pushbutton_layout
|
target: tab_bar.pushbutton_layout
|
||||||
}
|
}
|
||||||
RibbonTourItem{
|
RibbonTourItem{
|
||||||
title: qsTr("Line Edits")
|
title: qsTr("Line Edits")
|
||||||
text: qsTr("Line edits with/without icon.")
|
text: qsTr("Line edits with/without icon.")
|
||||||
target: lineedit_layout
|
target: tab_bar.lineedit_layout
|
||||||
enterFunc: ()=>{
|
enterFunc: ()=>{
|
||||||
tab_bar.setPage(1)
|
tab_bar.setPage(1)
|
||||||
lineedit_with_icon.text = "Line Edit with icon."
|
tab_bar.lineedit_with_icon.text = "Line Edit with icon."
|
||||||
tour.refresh(300)
|
tour.refresh(300)
|
||||||
}
|
}
|
||||||
exitFunc: ()=>{
|
exitFunc: ()=>{
|
||||||
tab_bar.setPage(0)
|
tab_bar.setPage(0)
|
||||||
lineedit_with_icon.clear()
|
tab_bar.lineedit_with_icon.clear()
|
||||||
tour.refresh(400)
|
tour.refresh(400)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -91,638 +92,12 @@ RibbonWindow {
|
||||||
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
||||||
}
|
}
|
||||||
Component.onCompleted: tour.open()
|
Component.onCompleted: tour.open()
|
||||||
RibbonTabBar {
|
|
||||||
id: tab_bar
|
|
||||||
modernStyle: root.modernStyle
|
|
||||||
rightToolBar: RowLayout{
|
|
||||||
id: tab_bar_tool
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text:"Test Button 1"
|
|
||||||
iconSource: RibbonIcons.Alert
|
|
||||||
checkable: true
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Test Button 2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
TabBar{
|
||||||
|
id: tab_bar
|
||||||
onSettingsBtnClicked:{
|
onSettingsBtnClicked:{
|
||||||
backstagepopup.open()
|
backstagepopup.open()
|
||||||
}
|
}
|
||||||
|
|
||||||
RibbonTabPage{
|
|
||||||
id: basic_page
|
|
||||||
title: qsTr("Basic")
|
|
||||||
RibbonTabGroup{
|
|
||||||
showOpenExternal: true
|
|
||||||
width: slider_layout.width + 20
|
|
||||||
text: qsTr("Slider")
|
|
||||||
RowLayout{
|
|
||||||
id: slider_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 0
|
|
||||||
RibbonSlider{
|
|
||||||
id: slider_with_btn
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
slideWidth: 40
|
|
||||||
horizontal: false
|
|
||||||
value: 20
|
|
||||||
}
|
|
||||||
RibbonSlider{
|
|
||||||
id: slider_without_btn
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
slideWidth: 40
|
|
||||||
horizontal: false
|
|
||||||
showButton: false
|
|
||||||
value: 40
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 0
|
|
||||||
Layout.alignment: Qt.AlignVCenter
|
|
||||||
RibbonSlider{
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
slideWidth: 40
|
|
||||||
value: 60
|
|
||||||
}
|
|
||||||
RibbonSlider{
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
slideWidth: 40
|
|
||||||
showButton: false
|
|
||||||
value: 80
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: switch_layout.width + 30
|
|
||||||
text: qsTr("Switch Button")
|
|
||||||
showOpenExternal: true
|
|
||||||
RowLayout{
|
|
||||||
id: switch_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 0
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 5
|
|
||||||
RibbonSwitchButton{
|
|
||||||
id: btn_with_color_and_grabberText
|
|
||||||
text: "Button"
|
|
||||||
grabberCheckedColor: "red"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
text: "Button"
|
|
||||||
textOnLeft: true
|
|
||||||
grabberCheckedColor: "orange"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
grabberCheckedColor: "blue"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 5
|
|
||||||
RibbonSwitchButton{
|
|
||||||
text: "Button"
|
|
||||||
showGrabberText: false
|
|
||||||
grabberCheckedColor: "green"
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
text: "Button"
|
|
||||||
showGrabberText: false
|
|
||||||
textOnLeft: true
|
|
||||||
grabberCheckedColor: "indigo"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonSwitchButton{
|
|
||||||
showGrabberText: false
|
|
||||||
grabberCheckedColor: "yellow"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: checkbox_layout.width + 30
|
|
||||||
text: qsTr("CheckBox")
|
|
||||||
showOpenExternal: true
|
|
||||||
RowLayout{
|
|
||||||
id: checkbox_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 0
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonCheckBox{
|
|
||||||
text: "CheckBox"
|
|
||||||
iconFilledBgColor: "blue"
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonCheckBox{
|
|
||||||
text: "CheckBox"
|
|
||||||
textOnLeft: true
|
|
||||||
iconFilledBgColor: "red"
|
|
||||||
}
|
|
||||||
RowLayout{
|
|
||||||
spacing: 30
|
|
||||||
RibbonCheckBox{
|
|
||||||
iconFilledBgColor:"orange"
|
|
||||||
tipText: "CheckBox"
|
|
||||||
showTooltip: true
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
RibbonCheckBox{
|
|
||||||
iconFilledBgColor:"purple"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: button_layout.width + 30
|
|
||||||
text: qsTr("Button")
|
|
||||||
showOpenExternal: true
|
|
||||||
RowLayout{
|
|
||||||
id: button_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 1
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
iconSource: RibbonIcons.Accessibility
|
|
||||||
checkable: true
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showTooltip: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Beaker
|
|
||||||
checkable: true
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showBg:false
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text:"Button"
|
|
||||||
showBg:false
|
|
||||||
showTooltip: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
id: btn_without_bg_and_label
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Badge
|
|
||||||
iconSourceFilled: RibbonIcons_Filled.Badge
|
|
||||||
checkable: true
|
|
||||||
tipText: "Button"
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Clock
|
|
||||||
iconSourceFilled: RibbonIcons_Filled.Clock
|
|
||||||
tipText: "Button"
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
showBg:false
|
|
||||||
iconSource: RibbonIcons.Board
|
|
||||||
iconSourceFilled: RibbonIcons_Filled.Board
|
|
||||||
checkable: true
|
|
||||||
tipText: "Button"
|
|
||||||
showTooltip: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: pushbutton_layout.width + 30
|
|
||||||
text: qsTr("Push Button")
|
|
||||||
RowLayout{
|
|
||||||
id: pushbutton_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
RibbonPushButton{
|
|
||||||
text: qsTr("No Menu")
|
|
||||||
iconSource: RibbonIcons.AttachText
|
|
||||||
}
|
|
||||||
RibbonPushButton{
|
|
||||||
id: push_btn_with_menu
|
|
||||||
text: qsTr("Menu")
|
|
||||||
iconSource: RibbonIcons.MeetNow
|
|
||||||
Action{
|
|
||||||
text: "Test Item 1"
|
|
||||||
}
|
|
||||||
RibbonMenuSeparator{}
|
|
||||||
Action{
|
|
||||||
text: "Test Item 2"
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonPushButton{
|
|
||||||
text: qsTr("No Menu")
|
|
||||||
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/heart.png"
|
|
||||||
iconSize: height-5
|
|
||||||
}
|
|
||||||
RibbonPushButton{
|
|
||||||
text: qsTr("Menu")
|
|
||||||
iconSource: "qrc:/qt/qml/RibbonUIAPP/resources/imgs/search.png"
|
|
||||||
Action{
|
|
||||||
text: "Test Item 3"
|
|
||||||
}
|
|
||||||
RibbonMenuSeparator{}
|
|
||||||
Action{
|
|
||||||
text: "Test Item 4"
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: lineedit_layout.width + 30
|
|
||||||
text: qsTr("Line Edit")
|
|
||||||
RowLayout{
|
|
||||||
id: lineedit_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonLineEdit{
|
|
||||||
}
|
|
||||||
RibbonLineEdit{
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonLineEdit{
|
|
||||||
id: lineedit_with_icon
|
|
||||||
iconSource:RibbonIcons.Search
|
|
||||||
}
|
|
||||||
RibbonLineEdit{
|
|
||||||
iconSource:RibbonIcons.Keyboard
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: lineedit_layout.width + 30
|
|
||||||
text: qsTr("Text Edit")
|
|
||||||
RowLayout{
|
|
||||||
id: textedit_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 30
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 50
|
|
||||||
}
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 30
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 30
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 50
|
|
||||||
iconSource:RibbonIcons.Search
|
|
||||||
}
|
|
||||||
RibbonTextEdit{
|
|
||||||
maxHeight: 30
|
|
||||||
iconSource:RibbonIcons.Keyboard
|
|
||||||
showClearBtn:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: combobox_layout.width + 30
|
|
||||||
text: qsTr("Combo Box")
|
|
||||||
RowLayout{
|
|
||||||
id: combobox_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonComboBox{
|
|
||||||
model: ListModel {
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonComboBox{
|
|
||||||
editable: true
|
|
||||||
model: ListModel {
|
|
||||||
id: model
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
onAccepted: {
|
|
||||||
if (find(editText) === -1 && editText)
|
|
||||||
model.append({text: editText})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonComboBox{
|
|
||||||
model: ListModel {
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
iconSource: RibbonIcons.Beaker
|
|
||||||
}
|
|
||||||
RibbonComboBox{
|
|
||||||
editable: true
|
|
||||||
model: ListModel {
|
|
||||||
id: model_1
|
|
||||||
ListElement { text: "Test Item 1" }
|
|
||||||
ListElement { text: "Test Item 2" }
|
|
||||||
ListElement { text: "Test Item 3" }
|
|
||||||
}
|
|
||||||
iconSource: RibbonIcons.Calendar
|
|
||||||
onAccepted: {
|
|
||||||
if (find(editText) === -1 && editText)
|
|
||||||
model_1.append({text: editText})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: spinbox_layout.width + 30
|
|
||||||
text: qsTr("Spin Box")
|
|
||||||
showBorder: false
|
|
||||||
RowLayout{
|
|
||||||
id: spinbox_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonSpinBox{
|
|
||||||
width: 100
|
|
||||||
}
|
|
||||||
RibbonSpinBox{
|
|
||||||
id: spinbox
|
|
||||||
width: 80
|
|
||||||
iconSource: RibbonIcons.DataPie
|
|
||||||
validator: DoubleValidator {
|
|
||||||
bottom: Math.min(spinbox.from, spinbox.to)
|
|
||||||
top: Math.max(spinbox.from, spinbox.to)
|
|
||||||
decimals: 2
|
|
||||||
notation: DoubleValidator.StandardNotation
|
|
||||||
}
|
|
||||||
textFromValue: function(value, locale) {
|
|
||||||
return Number(value / 100).toLocaleString(locale, 'f', 2)
|
|
||||||
}
|
|
||||||
valueFromText: function(text, locale) {
|
|
||||||
return Math.round(Number.fromLocaleString(locale, text) * 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabPage{
|
|
||||||
title: qsTr("Progress")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: progressbar_layout.width + 30
|
|
||||||
text: qsTr("ProgressBar")
|
|
||||||
RowLayout{
|
|
||||||
id: progressbar_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonSlider{
|
|
||||||
id: progressbar_slider
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
slideWidth: 40
|
|
||||||
horizontal: false
|
|
||||||
showButton: false
|
|
||||||
value: 40
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Top
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Left
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Right
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
textLabelPosition: RibbonProgressBar.LabelPosition.Bottom
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ColumnLayout{
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: true
|
|
||||||
showText: false
|
|
||||||
}
|
|
||||||
RibbonProgressBar{
|
|
||||||
barWidth: 100
|
|
||||||
indeterminate: false
|
|
||||||
showText: false
|
|
||||||
value: progressbar_slider.value / 100
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabPage{
|
|
||||||
title: qsTr("Views")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: message_list_view_layout.width + 30
|
|
||||||
text: qsTr("MessageListView")
|
|
||||||
RowLayout{
|
|
||||||
id: message_list_view_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr('Open Message List View')
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: {
|
|
||||||
Window.window.popup.showContent("qrc:/qt/qml/RibbonUIAPP/components/RibbonMessageListViewExample.qml")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabPage{
|
|
||||||
title: qsTr("Others")
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: text_layout.width + 30
|
|
||||||
text: qsTr("Text")
|
|
||||||
RowLayout{
|
|
||||||
id: text_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonText{
|
|
||||||
font.pixelSize: 13
|
|
||||||
text: "Test Text"
|
|
||||||
}
|
|
||||||
RibbonText{
|
|
||||||
font.pixelSize: 13
|
|
||||||
text: "Test Text (Read Only)"
|
|
||||||
viewOnly: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: menu_layout.width + 30
|
|
||||||
text: qsTr("Menu")
|
|
||||||
RowLayout{
|
|
||||||
id: menu_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Menu")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: menu.popup()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonTabGroup{
|
|
||||||
width: popup_layout.width + 30
|
|
||||||
text: qsTr("Popup")
|
|
||||||
RowLayout{
|
|
||||||
id: popup_layout
|
|
||||||
anchors.centerIn: parent
|
|
||||||
height: parent.height
|
|
||||||
spacing: 10
|
|
||||||
ColumnLayout{
|
|
||||||
spacing: 10
|
|
||||||
Layout.fillHeight: true
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Popup")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: popup.open()
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Popup Dialog (Double Choices)")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: {
|
|
||||||
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton
|
|
||||||
dialog.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonButton{
|
|
||||||
text: qsTr("Open Popup Dialog (Triple Choices)")
|
|
||||||
iconSource: RibbonIcons.Open
|
|
||||||
onClicked: {
|
|
||||||
dialog.buttonFlags = RibbonPopupDialogType.NegativeButton | RibbonPopupDialogType.PositiveButton | RibbonPopupDialogType.NeutralButton
|
|
||||||
dialog.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
RibbonPopup{
|
|
||||||
id: popup
|
|
||||||
height: 200
|
|
||||||
width: height
|
|
||||||
target: windowItems
|
|
||||||
blurEnabled: true
|
|
||||||
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
|
||||||
}
|
|
||||||
RibbonPopupDialog{
|
|
||||||
id: dialog
|
|
||||||
target: windowItems
|
|
||||||
blurEnabled: true
|
|
||||||
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RibbonPaperView{
|
RibbonPaperView{
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ set(qml_files RibbonTabBar.qml RibbonTabButton.qml RibbonView.qml
|
||||||
RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
|
RibbonMessageListView.qml RibbonTour.qml RibbonTourContent.qml
|
||||||
RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
|
RibbonBackStageView.qml RibbonBackStagePage.qml RibbonBackStageGroup.qml
|
||||||
RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
|
RibbonRadioButton.qml RibbonBackStageMenuItem.qml RibbonTourItem.qml
|
||||||
RibbonObject.qml RibbonProgressBar.qml)
|
RibbonObject.qml RibbonProgressBar.qml RibbonProgressRing.qml)
|
||||||
|
|
||||||
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
|
set(qml_prefix "qml/Qt${QT_VERSION_MAJOR}/")
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import QtQuick 2.15
|
||||||
|
import RibbonUI 1.0
|
||||||
|
|
||||||
|
RibbonProgressBar {
|
||||||
|
id: control
|
||||||
|
barWidth: centerInTextLabel && showText ? Math.max(textLabel.contentWidth + ringWidth * 2 + textLabelMargin * 2, 50) : 50
|
||||||
|
barHeight: barWidth
|
||||||
|
animationDurarion: 2000
|
||||||
|
property real ringWidth: 6
|
||||||
|
property bool centerInTextLabel: false
|
||||||
|
|
||||||
|
QtObject{
|
||||||
|
id: private_property
|
||||||
|
property var backup_anchors
|
||||||
|
property var backup_position
|
||||||
|
property real radius: control.barWidth/2-control.ringWidth/2
|
||||||
|
}
|
||||||
|
|
||||||
|
Connections{
|
||||||
|
target: RibbonTheme
|
||||||
|
function onIsDarkModeChanged(){
|
||||||
|
canvas.requestPaint()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bar.background: Rectangle {
|
||||||
|
implicitWidth: barWidth
|
||||||
|
implicitHeight: barHeight
|
||||||
|
radius: control.width/2
|
||||||
|
color:"transparent"
|
||||||
|
border.color: control.bgColor
|
||||||
|
border.width: control.ringWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
onIndeterminateChanged:{
|
||||||
|
canvas.requestPaint()
|
||||||
|
}
|
||||||
|
|
||||||
|
onVisualPositionChanged: canvas.requestPaint()
|
||||||
|
|
||||||
|
bar.contentItem: Canvas {
|
||||||
|
id:canvas
|
||||||
|
implicitHeight: barHeight
|
||||||
|
implicitWidth: barWidth
|
||||||
|
antialiasing: true
|
||||||
|
renderTarget: Canvas.Image
|
||||||
|
property real startAngle: 0
|
||||||
|
property real sweepAngle: 0
|
||||||
|
SequentialAnimation on startAngle {
|
||||||
|
loops: Animation.Infinite
|
||||||
|
running: control.visible && control.indeterminate
|
||||||
|
PropertyAnimation { from: 0; to: 450; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
PropertyAnimation { from: 450; to: 1080; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
}
|
||||||
|
SequentialAnimation on sweepAngle {
|
||||||
|
loops: Animation.Infinite
|
||||||
|
running: control.visible && control.indeterminate
|
||||||
|
PropertyAnimation { from: 0; to: 180; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
PropertyAnimation { from: 180; to: 0; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
}
|
||||||
|
onStartAngleChanged: {
|
||||||
|
requestPaint()
|
||||||
|
}
|
||||||
|
onPaint: {
|
||||||
|
var ctx = canvas.getContext("2d")
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
ctx.save()
|
||||||
|
ctx.lineWidth = control.ringWidth
|
||||||
|
ctx.strokeStyle = control.indicatorColor
|
||||||
|
ctx.lineCap = "round"
|
||||||
|
ctx.beginPath()
|
||||||
|
if(control.indeterminate){
|
||||||
|
ctx.arc(width/2, height/2, private_property.radius , Math.PI * (startAngle - 90) / 180, Math.PI * (startAngle - 90 + sweepAngle) / 180)
|
||||||
|
}else{
|
||||||
|
ctx.arc(width/2, height/2, private_property.radius , -0.5 * Math.PI , -0.5 * Math.PI + (control.indeterminate ? 0.0 : control.visualPosition) * 2 * Math.PI)
|
||||||
|
}
|
||||||
|
ctx.stroke()
|
||||||
|
ctx.closePath()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onCenterInTextLabelChanged: {
|
||||||
|
if(centerInTextLabel){
|
||||||
|
private_property.backup_anchors = textLabel.anchors
|
||||||
|
private_property.backup_position = textLabelPosition
|
||||||
|
textLabel.anchors.top = undefined
|
||||||
|
textLabel.anchors.left = undefined
|
||||||
|
textLabel.anchors.right = undefined
|
||||||
|
textLabel.anchors.bottom = undefined
|
||||||
|
textLabel.anchors.horizontalCenter = undefined
|
||||||
|
textLabel.anchors.verticalCenter = undefined
|
||||||
|
textLabel.anchors.centerIn = control
|
||||||
|
textLabelPosition = RibbonProgressBar.LabelPosition.None
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
textLabel.anchors = private_property.backup_anchors
|
||||||
|
textLabelPosition = private_property.backup_position
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import QtQuick
|
||||||
|
import RibbonUI
|
||||||
|
|
||||||
|
RibbonProgressBar {
|
||||||
|
id: control
|
||||||
|
barWidth: centerInTextLabel && showText ? Math.max(textLabel.contentWidth + ringWidth * 2 + textLabelMargin * 2, 50) : 50
|
||||||
|
barHeight: barWidth
|
||||||
|
animationDurarion: 2000
|
||||||
|
property real ringWidth: 6
|
||||||
|
property bool centerInTextLabel: false
|
||||||
|
|
||||||
|
QtObject{
|
||||||
|
id: private_property
|
||||||
|
property var backup_anchors
|
||||||
|
property var backup_position
|
||||||
|
property real radius: control.barWidth/2-control.ringWidth/2
|
||||||
|
}
|
||||||
|
|
||||||
|
Connections{
|
||||||
|
target: RibbonTheme
|
||||||
|
function onIsDarkModeChanged(){
|
||||||
|
canvas.requestPaint()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bar.background: Rectangle {
|
||||||
|
implicitWidth: barWidth
|
||||||
|
implicitHeight: barHeight
|
||||||
|
radius: control.width/2
|
||||||
|
color:"transparent"
|
||||||
|
border.color: control.bgColor
|
||||||
|
border.width: control.ringWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
onIndeterminateChanged:{
|
||||||
|
canvas.requestPaint()
|
||||||
|
}
|
||||||
|
|
||||||
|
onVisualPositionChanged: canvas.requestPaint()
|
||||||
|
|
||||||
|
bar.contentItem: Canvas {
|
||||||
|
id:canvas
|
||||||
|
implicitHeight: barHeight
|
||||||
|
implicitWidth: barWidth
|
||||||
|
antialiasing: true
|
||||||
|
renderTarget: Canvas.Image
|
||||||
|
property real startAngle: 0
|
||||||
|
property real sweepAngle: 0
|
||||||
|
SequentialAnimation on startAngle {
|
||||||
|
loops: Animation.Infinite
|
||||||
|
running: control.visible && control.indeterminate
|
||||||
|
PropertyAnimation { from: 0; to: 450; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
PropertyAnimation { from: 450; to: 1080; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
}
|
||||||
|
SequentialAnimation on sweepAngle {
|
||||||
|
loops: Animation.Infinite
|
||||||
|
running: control.visible && control.indeterminate
|
||||||
|
PropertyAnimation { from: 0; to: 180; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
PropertyAnimation { from: 180; to: 0; duration: control.animationDurarion/2; easing.type: Easing.OutSine }
|
||||||
|
}
|
||||||
|
onStartAngleChanged: {
|
||||||
|
requestPaint()
|
||||||
|
}
|
||||||
|
onPaint: {
|
||||||
|
var ctx = canvas.getContext("2d")
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
ctx.save()
|
||||||
|
ctx.lineWidth = control.ringWidth
|
||||||
|
ctx.strokeStyle = control.indicatorColor
|
||||||
|
ctx.lineCap = "round"
|
||||||
|
ctx.beginPath()
|
||||||
|
if(control.indeterminate){
|
||||||
|
ctx.arc(width/2, height/2, private_property.radius , Math.PI * (startAngle - 90) / 180, Math.PI * (startAngle - 90 + sweepAngle) / 180)
|
||||||
|
}else{
|
||||||
|
ctx.arc(width/2, height/2, private_property.radius , -0.5 * Math.PI , -0.5 * Math.PI + (control.indeterminate ? 0.0 : control.visualPosition) * 2 * Math.PI)
|
||||||
|
}
|
||||||
|
ctx.stroke()
|
||||||
|
ctx.closePath()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onCenterInTextLabelChanged: {
|
||||||
|
if(centerInTextLabel){
|
||||||
|
private_property.backup_anchors = textLabel.anchors
|
||||||
|
private_property.backup_position = textLabelPosition
|
||||||
|
textLabel.anchors.top = undefined
|
||||||
|
textLabel.anchors.left = undefined
|
||||||
|
textLabel.anchors.right = undefined
|
||||||
|
textLabel.anchors.bottom = undefined
|
||||||
|
textLabel.anchors.horizontalCenter = undefined
|
||||||
|
textLabel.anchors.verticalCenter = undefined
|
||||||
|
textLabel.anchors.centerIn = control
|
||||||
|
textLabelPosition = RibbonProgressBar.LabelPosition.None
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
textLabel.anchors = private_property.backup_anchors
|
||||||
|
textLabelPosition = private_property.backup_position
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue