update
parent
5c0befb6c2
commit
591e6bdeff
|
@ -52,8 +52,8 @@ FluWindow {
|
||||||
text:lang.dark_mode
|
text:lang.dark_mode
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
selected: FluTheme.dark
|
checked: FluTheme.dark
|
||||||
clickFunc:function(){
|
onClicked: {
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
FluTheme.darkMode = FluDarkMode.Light
|
FluTheme.darkMode = FluDarkMode.Light
|
||||||
}else{
|
}else{
|
||||||
|
|
|
@ -22,7 +22,7 @@ FluScrollablePage{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
|
||||||
FluTextButton{
|
FluTextButton{
|
||||||
disabled:text_button_switch.selected
|
disabled:text_button_switch.checked
|
||||||
text:"Text Button"
|
text:"Text Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showInfo("点击Text Button")
|
showInfo("点击Text Button")
|
||||||
|
@ -32,18 +32,13 @@ FluScrollablePage{
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
Row{
|
id:text_button_switch
|
||||||
spacing: 5
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:text_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
|
@ -64,7 +59,7 @@ FluScrollablePage{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
disabled:button_switch.selected
|
disabled:button_switch.checked
|
||||||
text:"Standard Button"
|
text:"Standard Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showInfo("点击StandardButton")
|
showInfo("点击StandardButton")
|
||||||
|
@ -74,18 +69,13 @@ FluScrollablePage{
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
Row{
|
id:button_switch
|
||||||
spacing: 5
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
|
@ -106,7 +96,7 @@ FluScrollablePage{
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
FluFilledButton{
|
FluFilledButton{
|
||||||
disabled:filled_button_switch.selected
|
disabled:filled_button_switch.checked
|
||||||
text:"Filled Button"
|
text:"Filled Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showWarning("点击FilledButton"+height)
|
showWarning("点击FilledButton"+height)
|
||||||
|
@ -116,18 +106,13 @@ FluScrollablePage{
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
Row{
|
id:filled_button_switch
|
||||||
spacing: 5
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:filled_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
|
@ -148,28 +133,20 @@ FluScrollablePage{
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
FluToggleButton{
|
FluToggleButton{
|
||||||
disabled:toggle_button_switch.selected
|
disabled:toggle_button_switch.checked
|
||||||
text:"Toggle Button"
|
text:"Toggle Button"
|
||||||
onClicked: {
|
|
||||||
selected = !selected
|
|
||||||
}
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
Row{
|
id:toggle_button_switch
|
||||||
spacing: 5
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:toggle_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
|
@ -178,7 +155,7 @@ FluScrollablePage{
|
||||||
code:'FluToggleButton{
|
code:'FluToggleButton{
|
||||||
text:"Toggle Button"
|
text:"Toggle Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
selected = !selected
|
checked = !checked
|
||||||
}
|
}
|
||||||
}'
|
}'
|
||||||
}
|
}
|
||||||
|
@ -191,7 +168,7 @@ FluScrollablePage{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
iconSource:FluentIcons.ChromeCloseContrast
|
iconSource:FluentIcons.ChromeCloseContrast
|
||||||
disabled:icon_button_switch.selected
|
disabled:icon_button_switch.checked
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
|
@ -201,18 +178,13 @@ FluScrollablePage{
|
||||||
showSuccess("点击IconButton")
|
showSuccess("点击IconButton")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
Row{
|
id:icon_button_switch
|
||||||
spacing: 5
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:icon_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
|
@ -232,7 +204,7 @@ FluScrollablePage{
|
||||||
paddings: 10
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
FluDropDownButton{
|
FluDropDownButton{
|
||||||
disabled:drop_down_button_switch.selected
|
disabled:drop_down_button_switch.checked
|
||||||
text:"DropDownButton"
|
text:"DropDownButton"
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
|
@ -253,17 +225,13 @@ FluScrollablePage{
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
Row{
|
FluToggleSwitch{
|
||||||
spacing: 5
|
id:drop_down_button_switch
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:drop_down_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
|
@ -304,35 +272,29 @@ FluScrollablePage{
|
||||||
property int selecIndex : 0
|
property int selecIndex : 0
|
||||||
model: 3
|
model: 3
|
||||||
delegate: FluRadioButton{
|
delegate: FluRadioButton{
|
||||||
selected : repeater.selecIndex===index
|
checked : repeater.selecIndex===index
|
||||||
disabled:radio_button_switch.selected
|
disabled:radio_button_switch.checked
|
||||||
text:"Radio Button_"+index
|
text:"Radio Button_"+index
|
||||||
onClicked:{
|
clickListener:function(){
|
||||||
repeater.selecIndex = index
|
repeater.selecIndex = index
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:radio_button_switch
|
||||||
Row{
|
|
||||||
spacing: 5
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
text:"Disabled"
|
||||||
id:radio_button_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: -1
|
Layout.topMargin: -1
|
||||||
code:'FluRadioButton{
|
code:'FluRadioButton{
|
||||||
selected:true
|
checked:true
|
||||||
text:"Text Button"
|
text:"Text Button"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
|
|
||||||
|
@ -340,38 +302,4 @@ FluScrollablePage{
|
||||||
}'
|
}'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluArea{
|
|
||||||
Layout.fillWidth: true
|
|
||||||
height: 68
|
|
||||||
paddings: 10
|
|
||||||
Layout.topMargin: 20
|
|
||||||
FluCheckBox{
|
|
||||||
disabled:check_box_switch.selected
|
|
||||||
text:"Check Box"
|
|
||||||
anchors{
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
left: parent.left
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Row{
|
|
||||||
spacing: 5
|
|
||||||
anchors{
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
|
||||||
}
|
|
||||||
FluToggleSwitch{
|
|
||||||
id:check_box_switch
|
|
||||||
Layout.alignment: Qt.AlignRight
|
|
||||||
text:"Disabled"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
CodeExpander{
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.topMargin: -1
|
|
||||||
code:'FluCheckBox{
|
|
||||||
text:"Check Box"
|
|
||||||
}'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,11 +18,21 @@ FluScrollablePage{
|
||||||
spacing: 30
|
spacing: 30
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
FluCheckBox{
|
FluCheckBox{
|
||||||
|
disabled: check_box_switch.checked
|
||||||
}
|
}
|
||||||
FluCheckBox{
|
FluCheckBox{
|
||||||
|
disabled: check_box_switch.checked
|
||||||
text:"Text"
|
text:"Text"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:check_box_switch
|
||||||
|
anchors{
|
||||||
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
|
@ -19,7 +19,7 @@ FluScrollablePage{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
placeholderText: "单行输入框"
|
placeholderText: "单行输入框"
|
||||||
Layout.preferredWidth: 300
|
Layout.preferredWidth: 300
|
||||||
disabled:text_box_switch.selected
|
disabled:text_box_switch.checked
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
|
@ -57,7 +57,7 @@ FluScrollablePage{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
placeholderText: "请输入密码"
|
placeholderText: "请输入密码"
|
||||||
Layout.preferredWidth: 300
|
Layout.preferredWidth: 300
|
||||||
disabled:password_box_switch.selected
|
disabled:password_box_switch.checked
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
|
@ -97,7 +97,7 @@ FluScrollablePage{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
placeholderText: "多行输入框"
|
placeholderText: "多行输入框"
|
||||||
Layout.preferredWidth: 300
|
Layout.preferredWidth: 300
|
||||||
disabled:text_box_multi_switch.selected
|
disabled:text_box_multi_switch.checked
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
|
@ -137,7 +137,7 @@ FluScrollablePage{
|
||||||
placeholderText: "AutoSuggestBox"
|
placeholderText: "AutoSuggestBox"
|
||||||
Layout.preferredWidth: 300
|
Layout.preferredWidth: 300
|
||||||
items:generateRandomNames(100)
|
items:generateRandomNames(100)
|
||||||
disabled:text_box_suggest_switch.selected
|
disabled:text_box_suggest_switch.checked
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
|
|
|
@ -52,8 +52,8 @@ FluScrollablePage{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
Layout.topMargin: 5
|
Layout.topMargin: 5
|
||||||
selected: FluTheme.dark
|
checked: FluTheme.dark
|
||||||
clickFunc:function(){
|
onClicked: {
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
FluTheme.darkMode = FluDarkMode.Light
|
FluTheme.darkMode = FluDarkMode.Light
|
||||||
}else{
|
}else{
|
||||||
|
@ -67,8 +67,8 @@ FluScrollablePage{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
Layout.topMargin: 5
|
Layout.topMargin: 5
|
||||||
selected: FluTheme.nativeText
|
checked: FluTheme.nativeText
|
||||||
clickFunc:function(){
|
onClicked: {
|
||||||
FluTheme.nativeText = !FluTheme.nativeText
|
FluTheme.nativeText = !FluTheme.nativeText
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,11 +18,20 @@ FluScrollablePage{
|
||||||
spacing: 30
|
spacing: 30
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
|
disabled: toggle_switch.checked
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
text:"Text"
|
disabled: toggle_switch.checked
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:toggle_switch
|
||||||
|
anchors{
|
||||||
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
CodeExpander{
|
CodeExpander{
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
|
@ -67,8 +67,8 @@ Rectangle{
|
||||||
color:root.textColor
|
color:root.textColor
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
selected: FluTheme.dark
|
checked: FluTheme.dark
|
||||||
clickFunc:function(){
|
clickListener: function(){
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
FluTheme.darkMode = FluDarkMode.Light
|
FluTheme.darkMode = FluDarkMode.Light
|
||||||
}else{
|
}else{
|
||||||
|
|
|
@ -5,36 +5,28 @@ import QtQuick.Layouts
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
property bool selected: false
|
|
||||||
property var clickFunc
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
|
property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
|
||||||
property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color bordercheckedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
|
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
|
||||||
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
||||||
property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color checkedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
|
property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
|
||||||
property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.15) : Qt.lighter(selectedColor,1.15)
|
property color checkedHoverColor: FluTheme.dark ? Qt.darker(checkedColor,1.15) : Qt.lighter(checkedColor,1.15)
|
||||||
property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3)
|
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
|
||||||
property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
||||||
|
property var clickListener : function(){
|
||||||
|
checked = !checked
|
||||||
|
}
|
||||||
id:control
|
id:control
|
||||||
enabled: !disabled
|
enabled: !disabled
|
||||||
focusPolicy:Qt.TabFocus
|
focusPolicy:Qt.TabFocus
|
||||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||||
padding:0
|
padding:0
|
||||||
onClicked: {
|
onClicked: clickListener()
|
||||||
if(disabled){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(clickFunc){
|
|
||||||
clickFunc()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
selected = !selected
|
|
||||||
}
|
|
||||||
background: Item{
|
background: Item{
|
||||||
FluFocusRectangle{
|
FluFocusRectangle{
|
||||||
visible: control.visualFocus
|
visible: control.visualFocus
|
||||||
|
@ -50,8 +42,8 @@ Button {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return borderDisableColor
|
return borderDisableColor
|
||||||
}
|
}
|
||||||
if(selected){
|
if(checked){
|
||||||
return borderSelectedColor
|
return bordercheckedColor
|
||||||
}
|
}
|
||||||
if(pressed){
|
if(pressed){
|
||||||
return borderPressedColor
|
return borderPressedColor
|
||||||
|
@ -63,17 +55,20 @@ Button {
|
||||||
}
|
}
|
||||||
border.width: 1
|
border.width: 1
|
||||||
color: {
|
color: {
|
||||||
if(selected){
|
if(checked){
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return selectedDisableColor
|
return checkedDisableColor
|
||||||
}
|
}
|
||||||
if(pressed){
|
if(pressed){
|
||||||
return selectedPreesedColor
|
return checkedPreesedColor
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return selectedHoverColor
|
return checkedHoverColor
|
||||||
}
|
}
|
||||||
return selectedColor
|
return checkedColor
|
||||||
|
}
|
||||||
|
if(disabled){
|
||||||
|
return disableColor
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return hoverColor
|
return hoverColor
|
||||||
|
@ -82,18 +77,18 @@ Button {
|
||||||
}
|
}
|
||||||
Behavior on color {
|
Behavior on color {
|
||||||
ColorAnimation{
|
ColorAnimation{
|
||||||
duration: 150
|
duration: 83
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluIcon {
|
FluIcon {
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
iconSource: FluentIcons.AcceptMedium
|
iconSource: FluentIcons.AcceptMedium
|
||||||
iconSize: 15
|
iconSize: 15
|
||||||
visible: selected
|
visible: checked
|
||||||
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||||
Behavior on visible {
|
Behavior on visible {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
duration: 150
|
duration: 83
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,7 +25,7 @@ Item {
|
||||||
visible: control.pageCount>1
|
visible: control.pageCount>1
|
||||||
disabled: control.pageCurrent<=1
|
disabled: control.pageCurrent<=1
|
||||||
text:control.previousText
|
text:control.previousText
|
||||||
onClicked: {
|
clickListener:function() {
|
||||||
control.calcNewPage(control.pageCurrent-1);
|
control.calcNewPage(control.pageCurrent-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -35,9 +35,9 @@ Item {
|
||||||
property int pageNumber:1
|
property int pageNumber:1
|
||||||
visible: control.pageCount>0
|
visible: control.pageCount>0
|
||||||
enabled: control.pageCurrent>1
|
enabled: control.pageCurrent>1
|
||||||
selected: pageNumber === control.pageCurrent
|
checked: pageNumber === control.pageCurrent
|
||||||
text:String(pageNumber)
|
text:String(pageNumber)
|
||||||
onClicked: {
|
clickListener:function() {
|
||||||
control.calcNewPage(pageNumber);
|
control.calcNewPage(pageNumber);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -58,8 +58,8 @@ Item {
|
||||||
:(control.pageCurrent+2+index-control.__pageButtonHalf)
|
:(control.pageCurrent+2+index-control.__pageButtonHalf)
|
||||||
}
|
}
|
||||||
text:String(pageNumber)
|
text:String(pageNumber)
|
||||||
selected: pageNumber === control.pageCurrent
|
checked: pageNumber === control.pageCurrent
|
||||||
onClicked: {
|
clickListener:function(){
|
||||||
control.calcNewPage(pageNumber);
|
control.calcNewPage(pageNumber);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -72,9 +72,9 @@ Item {
|
||||||
FluToggleButton{
|
FluToggleButton{
|
||||||
property int pageNumber:control.pageCount
|
property int pageNumber:control.pageCount
|
||||||
visible: control.pageCount>1
|
visible: control.pageCount>1
|
||||||
selected: pageNumber === control.pageCurrent
|
checked: pageNumber === control.pageCurrent
|
||||||
text:String(pageNumber)
|
text:String(pageNumber)
|
||||||
onClicked: {
|
clickListener:function(){
|
||||||
control.calcNewPage(pageNumber);
|
control.calcNewPage(pageNumber);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -83,7 +83,7 @@ Item {
|
||||||
visible: control.pageCount>1
|
visible: control.pageCount>1
|
||||||
disabled: control.pageCurrent>=control.pageCount
|
disabled: control.pageCurrent>=control.pageCount
|
||||||
text:control.nextText
|
text:control.nextText
|
||||||
onClicked: {
|
clickListener:function() {
|
||||||
control.calcNewPage(control.pageCurrent+1);
|
control.calcNewPage(control.pageCurrent+1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,8 +5,15 @@ import QtQuick.Layouts
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
property bool selected: false
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
property color borderNormalColor: checked ? FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark : FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
|
||||||
|
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(198/255,198/255,198/255,1)
|
||||||
|
property color normalColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1)
|
||||||
|
property color hoverColor: checked ? FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1) : FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(222/255,222/255,222/255,1)
|
||||||
|
property color disableColor: checked ? FluTheme.dark ? Qt.rgba(159/255,159/255,159/255,1) : Qt.rgba(159/255,159/255,159/255,1) : FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(222/255,222/255,222/255,1)
|
||||||
|
property var clickListener : function(){
|
||||||
|
checked = !checked
|
||||||
|
}
|
||||||
id:control
|
id:control
|
||||||
enabled: !disabled
|
enabled: !disabled
|
||||||
focusPolicy:Qt.TabFocus
|
focusPolicy:Qt.TabFocus
|
||||||
|
@ -18,6 +25,7 @@ Button {
|
||||||
}
|
}
|
||||||
font:FluTextStyle.Body
|
font:FluTextStyle.Body
|
||||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||||
|
onClicked: clickListener()
|
||||||
contentItem: RowLayout{
|
contentItem: RowLayout{
|
||||||
Rectangle{
|
Rectangle{
|
||||||
id:rect_check
|
id:rect_check
|
||||||
|
@ -25,22 +33,22 @@ Button {
|
||||||
height: 20
|
height: 20
|
||||||
radius: 10
|
radius: 10
|
||||||
border.width: {
|
border.width: {
|
||||||
if(selected&&disabled){
|
if(checked&&disabled){
|
||||||
return 3
|
return 3
|
||||||
}
|
}
|
||||||
if(pressed){
|
if(pressed){
|
||||||
if(selected){
|
if(checked){
|
||||||
return 5
|
return 5
|
||||||
}
|
}
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
if(selected){
|
if(checked){
|
||||||
return 3
|
return 3
|
||||||
}
|
}
|
||||||
return 1
|
return 1
|
||||||
}
|
}
|
||||||
return selected ? 5 : 1
|
return checked ? 5 : 1
|
||||||
}
|
}
|
||||||
Behavior on border.width {
|
Behavior on border.width {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
|
@ -51,46 +59,18 @@ Button {
|
||||||
}
|
}
|
||||||
border.color: {
|
border.color: {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
if(FluTheme.dark){
|
return borderDisableColor
|
||||||
return Qt.rgba(82/255,82/255,82/255,1)
|
|
||||||
}else{
|
|
||||||
return Qt.rgba(198/255,198/255,198/255,1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(selected){
|
|
||||||
if(FluTheme.dark){
|
|
||||||
return FluTheme.primaryColor.lighter
|
|
||||||
}else{
|
|
||||||
|
|
||||||
return FluTheme.primaryColor.dark
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
if(FluTheme.dark){
|
|
||||||
return Qt.rgba(161/255,161/255,161/255,1)
|
|
||||||
}else{
|
|
||||||
|
|
||||||
return Qt.rgba(141/255,141/255,141/255,1)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return borderNormalColor
|
||||||
}
|
}
|
||||||
color:{
|
color:{
|
||||||
if(disabled&&selected){
|
if(disabled){
|
||||||
return Qt.rgba(159/255,159/255,159/255,1)
|
return disableColor
|
||||||
}
|
}
|
||||||
if(FluTheme.dark){
|
if(hovered){
|
||||||
if(hovered){
|
return hoverColor
|
||||||
return Qt.rgba(43/255,43/255,43/255,1)
|
|
||||||
}
|
|
||||||
return Qt.rgba(50/255,50/255,50/255,1)
|
|
||||||
}else{
|
|
||||||
if(hovered){
|
|
||||||
if(selected){
|
|
||||||
return Qt.rgba(1,1,1,1)
|
|
||||||
}
|
|
||||||
return Qt.rgba(222/255,222/255,222/255,1)
|
|
||||||
}
|
|
||||||
return Qt.rgba(1,1,1,1)
|
|
||||||
}
|
}
|
||||||
|
return normalColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
|
|
|
@ -6,42 +6,43 @@ import FluentUI
|
||||||
Button {
|
Button {
|
||||||
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property bool selected: false
|
|
||||||
property color normalColor: {
|
property color normalColor: {
|
||||||
if(selected){
|
if(checked){
|
||||||
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
}else{
|
}else{
|
||||||
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
property color hoverColor: {
|
property color hoverColor: {
|
||||||
if(selected){
|
if(checked){
|
||||||
return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
||||||
}else{
|
}else{
|
||||||
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
property color disableColor: {
|
property color disableColor: {
|
||||||
if(selected){
|
if(checked){
|
||||||
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
}else{
|
}else{
|
||||||
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
property var clickListener : function(){
|
||||||
|
checked = !checked
|
||||||
|
}
|
||||||
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
|
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
|
||||||
|
|
||||||
id: control
|
id: control
|
||||||
enabled: !disabled
|
enabled: !disabled
|
||||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||||
focusPolicy:Qt.TabFocus
|
focusPolicy:Qt.TabFocus
|
||||||
horizontalPadding:12
|
horizontalPadding:12
|
||||||
|
onClicked: clickListener()
|
||||||
background: Rectangle{
|
background: Rectangle{
|
||||||
implicitWidth: 28
|
implicitWidth: 28
|
||||||
implicitHeight: 28
|
implicitHeight: 28
|
||||||
radius: 4
|
radius: 4
|
||||||
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
|
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
|
||||||
border.width: selected ? 0 : 1
|
border.width: checked ? 0 : 1
|
||||||
FluFocusRectangle{
|
FluFocusRectangle{
|
||||||
visible: control.visualFocus
|
visible: control.visualFocus
|
||||||
radius:8
|
radius:8
|
||||||
|
@ -50,7 +51,7 @@ Button {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return disableColor
|
return disableColor
|
||||||
}
|
}
|
||||||
if(selected){
|
if(checked){
|
||||||
if(pressed){
|
if(pressed){
|
||||||
return pressedColor
|
return pressedColor
|
||||||
}
|
}
|
||||||
|
@ -63,7 +64,7 @@ Button {
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
color: {
|
color: {
|
||||||
if(selected){
|
if(checked){
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(173/255,173/255,173/255,1)
|
return Qt.rgba(173/255,173/255,173/255,1)
|
||||||
|
@ -77,7 +78,7 @@ Button {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(131/255,131/255,131/255,1)
|
return Qt.rgba(131/255,131/255,131/255,1)
|
||||||
}
|
}
|
||||||
if(!selected){
|
if(!checked){
|
||||||
if(pressed){
|
if(pressed){
|
||||||
return Qt.rgba(162/255,162/255,162/255,1)
|
return Qt.rgba(162/255,162/255,162/255,1)
|
||||||
}
|
}
|
||||||
|
@ -87,7 +88,7 @@ Button {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(160/255,160/255,160/255,1)
|
return Qt.rgba(160/255,160/255,160/255,1)
|
||||||
}
|
}
|
||||||
if(!selected){
|
if(!checked){
|
||||||
if(pressed){
|
if(pressed){
|
||||||
return Qt.rgba(96/255,96/255,96/255,1)
|
return Qt.rgba(96/255,96/255,96/255,1)
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,22 +5,26 @@ import QtQuick.Layouts
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
|
property bool disabled: false
|
||||||
property bool selected: false
|
property color disableColor: checked ? FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(159/255,159/255,159/255,1) :FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(240/255,240/255,240/255,1)
|
||||||
property var clickFunc
|
property color checkColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
|
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(240/255,240/255,240/255,1)
|
||||||
|
property color normalColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
||||||
|
property color borderNormalColor: FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
|
||||||
|
property color borderCheckColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
|
property color borderDisableColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
|
||||||
|
property color dotNormalColor: FluTheme.dark ? Qt.rgba(208/255,208/255,208/255,1) : Qt.rgba(93/255,93/255,93/255,1)
|
||||||
|
property color dotCheckColor: FluTheme.dark ? Qt.rgba(0/255,0/255,0/255,1) : Qt.rgba(255/255,255/255,255/255,1)
|
||||||
|
property var clickListener : function(){
|
||||||
|
checked = !checked
|
||||||
|
}
|
||||||
id: control
|
id: control
|
||||||
height: 20
|
height: 20
|
||||||
|
enabled: !disabled
|
||||||
implicitHeight: height
|
implicitHeight: height
|
||||||
focusPolicy:Qt.TabFocus
|
focusPolicy:Qt.TabFocus
|
||||||
Keys.onSpacePressed: control.visualFocus&&clicked()
|
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||||
onClicked: {
|
onClicked: clickListener()
|
||||||
if(clickFunc){
|
|
||||||
clickFunc()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
selected = !selected
|
|
||||||
}
|
|
||||||
contentItem: Item{}
|
contentItem: Item{}
|
||||||
background : RowLayout{
|
background : RowLayout{
|
||||||
spacing: 0
|
spacing: 0
|
||||||
|
@ -34,39 +38,45 @@ Button {
|
||||||
radius: 20
|
radius: 20
|
||||||
}
|
}
|
||||||
color: {
|
color: {
|
||||||
if(FluTheme.dark){
|
if(disabled){
|
||||||
if(selected){
|
return disableColor
|
||||||
return FluTheme.primaryColor.dark
|
|
||||||
}
|
|
||||||
if(hovered){
|
|
||||||
return "#3E3E3C"
|
|
||||||
}
|
|
||||||
return "#323232"
|
|
||||||
}else{
|
|
||||||
if(selected){
|
|
||||||
return FluTheme.primaryColor.dark
|
|
||||||
}
|
|
||||||
if(hovered){
|
|
||||||
return "#F4F4F4"
|
|
||||||
}
|
|
||||||
return "#FFFFFF"
|
|
||||||
}
|
}
|
||||||
|
if(checked){
|
||||||
|
return checkColor
|
||||||
|
}
|
||||||
|
if(hovered){
|
||||||
|
return hoverColor
|
||||||
|
}
|
||||||
|
return normalColor
|
||||||
}
|
}
|
||||||
border.width: 1
|
border.width: 1
|
||||||
border.color: selected ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
|
border.color: {
|
||||||
|
if(disabled){
|
||||||
|
return borderDisableColor
|
||||||
|
}
|
||||||
|
if(checked){
|
||||||
|
return borderCheckColor
|
||||||
|
}
|
||||||
|
return borderNormalColor
|
||||||
|
}
|
||||||
Rectangle {
|
Rectangle {
|
||||||
width: pressed ? 28 : 20
|
width: pressed ? 28 : 20
|
||||||
anchors{
|
anchors{
|
||||||
left: selected ? undefined : parent.left
|
left: checked ? undefined : parent.left
|
||||||
leftMargin: selected ? 20 : 0
|
leftMargin: checked ? 20 : 0
|
||||||
right: selected ? parent.right : undefined
|
right: checked ? parent.right : undefined
|
||||||
rightMargin: selected ? 0: 20
|
rightMargin: checked ? 0: 20
|
||||||
}
|
}
|
||||||
height: 20
|
height: 20
|
||||||
radius: 10
|
radius: 10
|
||||||
scale: hovered ? 7/10 : 6/10
|
scale: hovered&!disabled ? 7/10 : 6/10
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
color: selected ? "#FFFFFF" : "#666666"
|
color: {
|
||||||
|
if(checked){
|
||||||
|
return dotCheckColor
|
||||||
|
}
|
||||||
|
return dotNormalColor
|
||||||
|
}
|
||||||
Behavior on anchors.leftMargin {
|
Behavior on anchors.leftMargin {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 167
|
duration: 167
|
||||||
|
|
Loading…
Reference in New Issue