FluentUI/example/qml/page/T_Buttons.qml

440 lines
10 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-08-26 17:20:30 +08:00
import "../component"
2023-02-28 18:29:00 +08:00
2023-03-10 18:08:32 +08:00
FluScrollablePage{
2023-05-11 18:24:58 +08:00
title:"Buttons"
2023-03-28 17:53:46 +08:00
2023-03-12 14:26:03 +08:00
FluText{
2023-03-12 21:49:11 +08:00
Layout.topMargin: 20
text:"支持Tab键切换焦点空格键执行点击事件"
2023-03-12 14:26:03 +08:00
}
2023-03-21 18:19:46 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-21 18:19:46 +08:00
height: 68
paddings: 10
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-03-21 18:19:46 +08:00
FluTextButton{
2023-05-26 13:49:32 +08:00
disabled:text_button_switch.checked
2023-03-21 18:19:46 +08:00
text:"Text Button"
2023-07-06 18:17:52 +08:00
contentDescription: "文本按钮"
2023-03-21 18:19:46 +08:00
onClicked: {
showInfo("点击Text Button")
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:text_button_switch
2023-03-21 18:19:46 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-03-21 18:19:46 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-03-21 18:19:46 +08:00
}
}
2023-04-05 17:48:17 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-05 17:48:17 +08:00
code:'FluTextButton{
2023-04-06 17:32:21 +08:00
text:"Text Button"
onClicked: {
2023-04-05 17:48:17 +08:00
2023-04-06 17:32:21 +08:00
}
2023-04-05 17:48:17 +08:00
}'
}
2023-03-21 18:19:46 +08:00
2023-03-10 18:08:32 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-10 18:08:32 +08:00
height: 68
paddings: 10
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-03-10 18:08:32 +08:00
FluButton{
2023-05-26 13:49:32 +08:00
disabled:button_switch.checked
2023-03-12 21:49:11 +08:00
text:"Standard Button"
2023-03-10 18:08:32 +08:00
onClicked: {
showInfo("点击StandardButton")
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:button_switch
2023-03-10 18:08:32 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-03-10 18:08:32 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-03-10 18:08:32 +08:00
}
2023-03-06 18:08:01 +08:00
}
2023-04-05 17:48:17 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-05 17:48:17 +08:00
code:'FluButton{
2023-04-06 17:32:21 +08:00
text:"Standard Button"
onClicked: {
2023-04-05 17:48:17 +08:00
2023-04-06 17:32:21 +08:00
}
2023-04-05 17:48:17 +08:00
}'
}
2023-03-10 18:08:32 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-10 18:08:32 +08:00
height: 68
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-03-10 18:08:32 +08:00
paddings: 10
FluFilledButton{
2023-05-26 13:49:32 +08:00
disabled:filled_button_switch.checked
2023-03-12 21:49:11 +08:00
text:"Filled Button"
2023-03-10 18:08:32 +08:00
onClicked: {
2023-05-13 00:20:12 +08:00
showWarning("点击FilledButton"+height)
2023-03-10 18:08:32 +08:00
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
2023-02-28 18:29:00 +08:00
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:filled_button_switch
2023-03-10 18:08:32 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-02-28 18:29:00 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-03-10 18:08:32 +08:00
}
}
2023-04-05 17:48:17 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-05 17:48:17 +08:00
code:'FluFilledButton{
2023-04-06 17:32:21 +08:00
text:"Filled Button"
onClicked: {
2023-04-05 17:48:17 +08:00
2023-04-06 17:32:21 +08:00
}
2023-04-05 17:48:17 +08:00
}'
}
2023-03-10 18:08:32 +08:00
2023-04-07 18:27:50 +08:00
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluToggleButton{
2023-05-26 13:49:32 +08:00
disabled:toggle_button_switch.checked
2023-04-07 18:27:50 +08:00
text:"Toggle Button"
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:toggle_button_switch
2023-04-07 18:27:50 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-04-07 18:27:50 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-04-07 18:27:50 +08:00
}
}
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-07 18:27:50 +08:00
code:'FluToggleButton{
text:"Toggle Button"
onClicked: {
2023-05-26 13:49:32 +08:00
checked = !checked
2023-04-07 18:27:50 +08:00
}
}'
}
2023-09-05 16:48:04 +08:00
Timer{
id:timer_progress
interval: 200
onTriggered: {
btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
if(btn_progress.progress==1){
timer_progress.stop()
}else{
timer_progress.start()
}
}
}
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluProgressButton{
id:btn_progress
disabled:progress_button_switch.checked
text:"Progress Button"
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked: {
btn_progress.progress = 0
timer_progress.restart()
}
}
FluToggleSwitch{
id:progress_button_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluProgressButton{
text:"Progress Button"
onClicked: {
}
}'
}
2023-09-11 18:10:50 +08:00
FluArea{
Layout.fillWidth: true
height: 68
Layout.topMargin: 20
paddings: 10
FluLoadingButton{
id:btn_loading
loading:loading_button_switch.checked
text:"Loading Button"
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked: {
}
}
FluToggleSwitch{
id:loading_button_switch
checked: true
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Loading"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluLoadingButton{
text:"Loading Button"
onClicked: {
}
}'
}
2023-03-10 18:08:32 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-08-22 18:19:40 +08:00
height: layout_icon_button.height + 30
2023-03-10 18:08:32 +08:00
paddings: 10
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-08-22 18:19:40 +08:00
Flow{
id:layout_icon_button
spacing: 10
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
2023-08-22 18:19:40 +08:00
right: icon_button_switch.left
}
FluIconButton{
disabled:icon_button_switch.checked
iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
onClicked:{
showSuccess("点击IconButton")
}
2023-03-10 18:08:32 +08:00
}
2023-08-18 09:59:38 +08:00
FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.checked
iconSize: 15
2023-08-22 18:19:40 +08:00
text:"IconOnly"
display: Button.IconOnly
2023-08-18 09:59:38 +08:00
onClicked:{
2023-08-22 18:19:40 +08:00
showSuccess("Button.IconOnly")
2023-08-18 09:59:38 +08:00
}
}
FluIconButton{
2023-08-22 18:19:40 +08:00
iconSource:FluentIcons.ChromeCloseContrast
2023-08-18 09:59:38 +08:00
disabled:icon_button_switch.checked
2023-08-22 18:19:40 +08:00
iconSize: 15
text:"TextOnly"
display: Button.TextOnly
2023-08-18 09:59:38 +08:00
onClicked:{
2023-08-22 18:19:40 +08:00
showSuccess("Button.TextOnly")
}
}
FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.checked
iconSize: 15
text:"TextBesideIcon"
display: Button.TextBesideIcon
onClicked:{
showSuccess("Button.TextBesideIcon")
}
}
FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.checked
iconSize: 15
text:"TextUnderIcon"
display: Button.TextUnderIcon
onClicked:{
showSuccess("Button.TextUnderIcon")
2023-08-18 09:59:38 +08:00
}
2023-03-06 18:08:01 +08:00
}
2023-03-10 18:08:32 +08:00
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:icon_button_switch
2023-03-10 18:08:32 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-03-10 18:08:32 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-03-10 18:08:32 +08:00
}
}
2023-04-05 17:48:17 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-05 17:48:17 +08:00
code:'FluIconButton{
2023-04-06 17:32:21 +08:00
iconSource:FluentIcons.ChromeCloseContrast
onClicked: {
2023-04-05 17:48:17 +08:00
2023-04-06 17:32:21 +08:00
}
2023-04-05 17:48:17 +08:00
}'
}
2023-03-10 18:08:32 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-16 18:11:03 +08:00
height: 68
2023-03-10 18:08:32 +08:00
paddings: 10
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-03-16 18:11:03 +08:00
FluDropDownButton{
2023-05-26 13:49:32 +08:00
disabled:drop_down_button_switch.checked
2023-03-16 18:11:03 +08:00
text:"DropDownButton"
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
2023-06-18 13:56:30 +08:00
FluMenuItem{
text:"Menu_1"
}
FluMenuItem{
text:"Menu_2"
}
FluMenuItem{
text:"Menu_3"
}
FluMenuItem{
text:"Menu_4"
2023-06-21 11:47:05 +08:00
onClicked: {
2023-07-07 16:56:29 +08:00
2023-06-21 11:47:05 +08:00
}
2023-06-18 13:56:30 +08:00
}
2023-03-10 18:08:32 +08:00
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:drop_down_button_switch
2023-03-10 18:08:32 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-02-28 18:29:00 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-03-10 18:08:32 +08:00
}
}
2023-04-05 17:48:17 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-05 17:48:17 +08:00
code:'FluDropDownButton{
2023-04-06 17:32:21 +08:00
text:"DropDownButton"
2023-07-07 16:56:29 +08:00
FluMenuItem{
text:"Menu_1"
},
FluMenuItem{
text:"Menu_2"
},
FluMenuItem{
text:"Menu_3"
},
FluMenuItem{
text:"Menu_4"
}
2023-04-05 17:48:17 +08:00
}'
}
2023-03-10 18:08:32 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-16 18:11:03 +08:00
height: 100
2023-03-10 18:08:32 +08:00
paddings: 10
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-06-21 11:47:05 +08:00
FluRadioButtons{
2023-03-16 18:11:03 +08:00
spacing: 8
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
2023-06-21 11:47:05 +08:00
FluRadioButton{
disabled:radio_button_switch.checked
text:"Radio Button_1"
}
FluRadioButton{
disabled:radio_button_switch.checked
text:"Radio Button_2"
}
FluRadioButton{
disabled:radio_button_switch.checked
text:"Radio Button_3"
2023-03-16 18:11:03 +08:00
}
2023-03-10 18:08:32 +08:00
}
2023-05-26 13:49:32 +08:00
FluToggleSwitch{
id:radio_button_switch
2023-03-10 18:08:32 +08:00
anchors{
right: parent.right
2023-05-26 13:49:32 +08:00
verticalCenter: parent.verticalCenter
2023-03-10 18:08:32 +08:00
}
2023-05-26 13:49:32 +08:00
text:"Disabled"
2023-02-28 18:29:00 +08:00
}
}
2023-04-05 17:48:17 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-05 17:48:17 +08:00
code:'FluRadioButton{
2023-05-26 13:49:32 +08:00
checked:true
2023-04-06 17:32:21 +08:00
text:"Text Button"
onClicked: {
2023-04-05 17:48:17 +08:00
2023-04-06 17:32:21 +08:00
}
2023-04-05 17:48:17 +08:00
}'
}
2023-03-16 14:34:20 +08:00
2023-02-28 18:29:00 +08:00
}