FluentUI/example/T_Buttons.qml

381 lines
8.5 KiB
QML
Raw Normal View History

2023-03-30 21:52:55 +08:00
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
2023-04-05 17:48:17 +08:00
import "./component"
2023-02-28 18:29:00 +08:00
2023-03-10 18:08:32 +08:00
FluScrollablePage{
title:"Buttons"
2023-03-28 17:53:46 +08:00
leftPadding:10
rightPadding:10
bottomPadding:20
2023-04-05 17:48:17 +08:00
spacing: 0
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{
disabled:text_button_switch.selected
text:"Text Button"
onClicked: {
showInfo("点击Text Button")
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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-03-12 22:36:31 +08:00
disabled:button_switch.selected
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
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
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-03-12 22:36:31 +08:00
disabled:filled_button_switch.selected
2023-03-12 21:49:11 +08:00
text:"Filled Button"
2023-03-10 18:08:32 +08:00
onClicked: {
2023-03-12 21:49:11 +08:00
showWarning("点击FilledButton")
2023-03-10 18:08:32 +08:00
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
2023-02-28 18:29:00 +08:00
}
2023-03-10 18:08:32 +08:00
Row{
2023-03-06 18:08:01 +08:00
spacing: 5
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
2023-02-28 18:29:00 +08:00
}
2023-03-10 18:08:32 +08:00
FluToggleSwitch{
id:filled_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
2023-02-28 18:29:00 +08:00
}
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{
disabled:toggle_button_switch.selected
text:"Toggle Button"
onClicked: {
selected = !selected
}
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:toggle_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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: {
selected = !selected
}
}'
}
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-03-12 22:36:31 +08:00
disabled:icon_button_switch.selected
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
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:icon_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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{
disabled:drop_down_button_switch.selected
text:"DropDownButton"
2023-03-10 18:08:32 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
2023-03-16 18:11:03 +08:00
items:[
FluMenuItem{
text:"Menu_1"
},
FluMenuItem{
text:"Menu_2"
},
FluMenuItem{
text:"Menu_3"
},
FluMenuItem{
text:"Menu_4"
2023-03-06 18:08:01 +08:00
}
2023-03-16 18:11:03 +08:00
]
2023-03-10 18:08:32 +08:00
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
2023-02-28 18:29:00 +08:00
}
2023-03-10 18:08:32 +08:00
FluToggleSwitch{
2023-03-16 18:11:03 +08:00
id:drop_down_button_switch
2023-03-10 18:08:32 +08:00
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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{
selected : repeater.selecIndex===index
disabled:radio_button_switch.selected
text:"Radio Button_"+index
onClicked:{
repeater.selecIndex = index
}
}
}
2023-03-10 18:08:32 +08:00
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
2023-03-16 18:11:03 +08:00
id:radio_button_switch
2023-03-10 18:08:32 +08:00
Layout.alignment: Qt.AlignRight
text:"Disabled"
2023-03-09 11:50:40 +08:00
}
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-04-06 17:32:21 +08:00
selected:true
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-03-16 18:11:03 +08:00
2023-03-16 14:34:20 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-16 14:34:20 +08:00
height: 68
paddings: 10
2023-04-05 17:48:17 +08:00
Layout.topMargin: 20
2023-03-16 18:11:03 +08:00
FluCheckBox{
disabled:check_box_switch.selected
text:"Check Box"
2023-03-16 14:34:20 +08:00
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
2023-03-16 18:11:03 +08:00
id:check_box_switch
2023-03-16 14:34:20 +08:00
Layout.alignment: Qt.AlignRight
text:"Disabled"
}
}
}
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:'FluCheckBox{
2023-04-06 17:32:21 +08:00
text:"Check Box"
2023-04-05 17:48:17 +08:00
}'
}
2023-02-28 18:29:00 +08:00
}