362 lines
11 KiB
QML
362 lines
11 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.11
|
|
import QtQuick.Window 2.15
|
|
import RibbonUI 1.0
|
|
import "components"
|
|
|
|
RibbonWindow {
|
|
id:root
|
|
width: 1200
|
|
height: 800
|
|
title: qsTr("RibbonUI APP")
|
|
comfirmedQuit: true
|
|
property bool modernStyle: RibbonTheme.modernStyle
|
|
RibbonTour{
|
|
id: tour
|
|
RibbonTourItem{
|
|
title: qsTr("Tab Bar")
|
|
text: qsTr("A tab bar for window, let user choose the controllers.")
|
|
target: tab_bar
|
|
enterFunc: ()=>{
|
|
tab_bar.folded = false
|
|
tour.refresh(300) // Use it if has animation
|
|
}
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Tab Bar Buttons")
|
|
text: qsTr("Tool buttons at the top of tab bar.")
|
|
target: tab_bar.tab_bar_tool
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Sliders")
|
|
text: qsTr("Vertical/Horizental sliders with/without buttons.")
|
|
target: tab_bar.slider_layout
|
|
enterFunc: ()=>{
|
|
tab_bar.setPage(0)
|
|
tab_bar.slider_with_btn.value = 70
|
|
tab_bar.slider_without_btn.value = 70
|
|
tour.refresh(500)
|
|
}
|
|
exitFunc: ()=>{
|
|
tab_bar.slider_with_btn.value = 50
|
|
tab_bar.slider_without_btn.value = 50
|
|
}
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Switch Buttons")
|
|
text: qsTr("Switch buttons with/without background color or grabber text.")
|
|
target: tab_bar.switch_layout
|
|
enterFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = true
|
|
exitFunc: ()=>tab_bar.btn_with_color_and_grabberText.checked = false
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("CheckBoxs")
|
|
text: qsTr("CheckBoxs with colorful background or with/without label text.")
|
|
target: tab_bar.checkbox_layout
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Buttons")
|
|
text: qsTr("Buttons with/without background or label text.")
|
|
target: tab_bar.button_layout
|
|
enterFunc: ()=>tab_bar.btn_without_bg_and_label.checked = true
|
|
exitFunc: ()=>tab_bar.btn_without_bg_and_label.checked = false
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Push Buttons")
|
|
text: qsTr("Push buttons with/without sub menu.")
|
|
target: tab_bar.pushbutton_layout
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Line Edits")
|
|
text: qsTr("Line edits with/without icon.")
|
|
target: tab_bar.lineedit_layout
|
|
enterFunc: ()=>{
|
|
tab_bar.setPage(1)
|
|
tab_bar.lineedit_with_icon.text = "Line Edit with icon."
|
|
tour.refresh(300)
|
|
}
|
|
exitFunc: ()=>{
|
|
tab_bar.setPage(0)
|
|
tab_bar.lineedit_with_icon.clear()
|
|
tour.refresh(400)
|
|
}
|
|
}
|
|
RibbonTourItem{
|
|
title: qsTr("Bottom Bar")
|
|
text: qsTr("A bottom bar for window.")
|
|
target: bottom_bar
|
|
}
|
|
target: windowItems
|
|
blurEnabled: true
|
|
targetRect: Qt.rect(windowItems.x + x, windowItems.y + y, width, height)
|
|
}
|
|
Component.onCompleted: tour.open()
|
|
|
|
TabBar{
|
|
id: tab_bar
|
|
onSettingsBtnClicked:{
|
|
backstagepopup.open()
|
|
}
|
|
}
|
|
|
|
RibbonPaperView{
|
|
id: view
|
|
anchors.fill: parent
|
|
pageWidth: (page_slider.value / 100.0) * width
|
|
spacing: 0
|
|
isMainView: true
|
|
ColumnLayout{
|
|
Layout.alignment: Qt.AlignCenter
|
|
Layout.topMargin: 30
|
|
spacing: 20
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.topMargin: 50
|
|
text: "RibbonUI"
|
|
font{
|
|
pixelSize: 50
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
Image {
|
|
source: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
|
|
fillMode:Image.PreserveAspectFit
|
|
mipmap: true
|
|
autoTransform: true
|
|
Layout.preferredHeight: 300
|
|
Layout.preferredWidth: height
|
|
Layout.alignment: Qt.AlignHCenter
|
|
layer.enabled: true
|
|
layer.effect: RibbonShadow{}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: "A Lightweight, minimalist and \nelegant Qt component library."
|
|
font{
|
|
pixelSize: 30
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: "Author: mentalfl0w"
|
|
font{
|
|
pixelSize: 25
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: "Email: mentalflow@ourdocs.cn"
|
|
font{
|
|
pixelSize: 25
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
RibbonText{
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: `Current Version: V${RibbonUI.version}`
|
|
font{
|
|
pixelSize: 20
|
|
bold: true
|
|
italic: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonBottomBar{
|
|
id: bottom_bar
|
|
anchors{
|
|
left: parent.left
|
|
right: parent.right
|
|
bottom: parent.bottom
|
|
}
|
|
rightContent: RowLayout{
|
|
clip: true
|
|
spacing:1
|
|
Layout.preferredHeight: parent.height
|
|
layoutDirection: Qt.RightToLeft
|
|
RibbonSlider{
|
|
id: page_slider
|
|
slideWidth: 80
|
|
showFilledColor: false
|
|
value: 70
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 3"
|
|
showBg:false
|
|
adaptHeight:true
|
|
iconSource: RibbonIcons.Airplane
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 4"
|
|
showBg:false
|
|
adaptHeight:true
|
|
}
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 5"
|
|
showBg:false
|
|
adaptHeight:true
|
|
iconSource: RibbonIcons.AccessTime
|
|
checkable: true
|
|
}
|
|
RibbonButton{
|
|
text:"Test Button 6"
|
|
showBg:false
|
|
adaptHeight:true
|
|
}
|
|
RibbonButton{
|
|
showBg:false
|
|
adaptHeight:true
|
|
iconSource: RibbonIcons.StoreMicrosoft
|
|
checkable: true
|
|
tipText: "Test Button 7"
|
|
}
|
|
}
|
|
|
|
titleBar.titleIconSource: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
|
|
titleBar.rightContent:RowLayout{
|
|
spacing: 1
|
|
layoutDirection: Qt.RightToLeft
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.Info
|
|
iconSourceFilled: RibbonIcons_Filled.Info
|
|
tipText: qsTr("About")
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
onClicked: root.showWindow(Qt.resolvedUrl("about.qml"))
|
|
}
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.Map
|
|
iconSourceFilled: RibbonIcons_Filled.Map
|
|
tipText: qsTr("Tour")
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
onClicked: tour.open()
|
|
}
|
|
|
|
}
|
|
titleBar.leftContent:RowLayout{
|
|
spacing: 1
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.ChevronDown
|
|
tipText: "Test Button 8"
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
RibbonMenu{
|
|
id:menu
|
|
width: 200
|
|
Action{
|
|
text: "Test Long Text Test Long Text Test Long Text"
|
|
checkable: true
|
|
}
|
|
RibbonMenuSeparator{}
|
|
Action{
|
|
text: "Test Item 1"
|
|
enabled: false
|
|
}
|
|
RibbonMenu{
|
|
width: parent.width
|
|
title: "Sub Menu"
|
|
Action { text: qsTr("Test Item 2") }
|
|
Action { text: qsTr("Test Item 3") }
|
|
}
|
|
}
|
|
onClicked:menu.popup()
|
|
}
|
|
RibbonButton{
|
|
showBg:false
|
|
iconSource: RibbonIcons.Apps
|
|
iconSourceFilled: RibbonIcons_Filled.Apps
|
|
checkable: true
|
|
tipText: "Test Button 9"
|
|
hoverColor: Qt.rgba(0,0,0, 0.3)
|
|
pressedColor: Qt.rgba(0,0,0, 0.4)
|
|
textColor: titleBar.titleTextColor
|
|
textColorReverse: false
|
|
enabled: false
|
|
}
|
|
}
|
|
Component{
|
|
id: t_content
|
|
RibbonBackStagePage{
|
|
onPageNameChanged: t_text.text = pageName
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
color: "transparent"
|
|
RibbonText{
|
|
id: t_text
|
|
anchors.centerIn: parent
|
|
font.pixelSize: 20
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonBackStageView{
|
|
id: backstagepopup
|
|
implicitHeight: root.height - root.borderWidth * 2
|
|
implicitWidth: root.width - root.borderWidth * 2
|
|
blurEnabled: true
|
|
blurTarget: root.windowItems
|
|
radius: borderRadius
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Home"
|
|
menuIcon: RibbonIcons.Home
|
|
type: RibbonBackStageView.MenuItemLocation.Head
|
|
sourceComponent: t_content
|
|
sourceArgs:{'pageName':"Home"}
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "File"
|
|
menuIcon: RibbonIcons.Document
|
|
type: RibbonBackStageView.MenuItemLocation.Head
|
|
sourceComponent: t_content
|
|
sourceArgs:{'pageName':"File"}
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Search"
|
|
menuIcon: RibbonIcons.Search
|
|
type: RibbonBackStageView.MenuItemLocation.Body
|
|
sourceComponent: t_content
|
|
sourceArgs:{'pageName':"Search"}
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Account"
|
|
menuIcon: RibbonIcons.PersonAccounts
|
|
type: RibbonBackStageView.MenuItemLocation.Tail
|
|
clickOnly: true
|
|
clickFunc: ()=>console.log("Menu Account clicked")
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "About"
|
|
menuIcon: RibbonIcons.Info
|
|
type: RibbonBackStageView.MenuItemLocation.Tail
|
|
clickOnly: true
|
|
clickFunc: ()=>root.showWindow(Qt.resolvedUrl("about.qml"))
|
|
}
|
|
RibbonBackStageMenuItem{
|
|
menuText: "Settings"
|
|
menuIcon: RibbonIcons.Settings
|
|
type: RibbonBackStageView.MenuItemLocation.Tail
|
|
sourceUrl: Qt.resolvedUrl("pages/SettingsMenuPage.qml")
|
|
}
|
|
}
|
|
}
|