FluentUI/example/qml/page/T_Buttons.qml

304 lines
6.8 KiB
QML
Raw Normal View History

2023-05-22 16:17:51 +08:00
import QtQuick
2023-03-30 21:52:55 +08:00
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
2023-04-19 23:04:56 +08:00
import QtQuick.Controls.Basic
2023-03-30 21:52:55 +08:00
import FluentUI
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/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"
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-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
FluIconButton{
2023-03-12 21:49:11 +08:00
iconSource:FluentIcons.ChromeCloseContrast
2023-05-26 13:49:32 +08:00
disabled:icon_button_switch.checked
2023-03-11 00:29:06 +08:00
iconSize: 15
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked:{
showSuccess("点击IconButton")
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-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"
items:[
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-03-16 18:11:03 +08:00
ColumnLayout{
spacing: 8
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
2023-03-16 18:11:03 +08:00
Repeater{
id:repeater
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
2023-05-26 13:49:32 +08:00
checked : repeater.selecIndex===index
disabled:radio_button_switch.checked
2023-03-16 18:11:03 +08:00
text:"Radio Button_"+index
2023-05-26 13:49:32 +08:00
clickListener:function(){
2023-03-16 18:11:03 +08:00
repeater.selecIndex = index
}
}
}
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
}