amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-27 05:38:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
朱子楚\zhuzi 2023-10-01 16:18:37 +08:00
parent 68127a7303
commit 1b6743efeb
4 changed files with 178 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
example/qml-Qt6/page/T_CheckBox.qml
View File

@ -11,27 +11,35 @@ FluScrollablePage{
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
height: 68 height: 72
paddings: 10 paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
FluText{
text:"A 2-state CheckBox"
}
Row{ Row{
spacing: 30 spacing: 30
anchors.verticalCenter: parent.verticalCenter anchors{
FluCheckBox{ top: parent.top
disabled: check_box_switch.checked topMargin: 30
} }
FluCheckBox{ FluCheckBox{
disabled: check_box_switch.checked disabled: check_box_switch_two.checked
}
FluCheckBox{
disabled: check_box_switch_two.checked
text:"Right" text:"Right"
} }
FluCheckBox{ FluCheckBox{
disabled: check_box_switch.checked disabled: check_box_switch_two.checked
text:"Left" text:"Left"
textRight: false textRight: false
} }
} }
FluToggleSwitch{ FluToggleSwitch{
id:check_box_switch id:check_box_switch_two
anchors{ anchors{
right: parent.right right: parent.right
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -47,4 +55,60 @@ FluScrollablePage{
}' }'
} }
FluArea{
Layout.fillWidth: true
height: 72
paddings: 10
Layout.topMargin: 20
FluText{
text:"A 3-state CheckBox"
}
Row{
spacing: 30
anchors{
top: parent.top
topMargin: 30
}
FluCheckBox{
property int count: 1
text:"Three State"
disabled: check_box_switch_three.checked
clickListener: function(){
var flag = count%3
if(flag === 0){
checked = false
indeterminate = false
}
if(flag === 1){
checked = true
indeterminate = false
}
if(flag === 2){
checked = true
indeterminate = true
}
count++
}
}
}
FluToggleSwitch{
id:check_box_switch_three
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCheckBox{
text:"Text"
indeterminate:true
}'
}
} }

78
example/qml/page/T_CheckBox.qml
View File

@ -12,27 +12,35 @@ FluScrollablePage{
FluArea{ FluArea{
Layout.fillWidth: true Layout.fillWidth: true
height: 68 height: 72
paddings: 10 paddings: 10
Layout.topMargin: 20 Layout.topMargin: 20
FluText{
text:"A 2-state CheckBox"
}
Row{ Row{
spacing: 30 spacing: 30
anchors.verticalCenter: parent.verticalCenter anchors{
FluCheckBox{ top: parent.top
disabled: check_box_switch.checked topMargin: 30
} }
FluCheckBox{ FluCheckBox{
disabled: check_box_switch.checked disabled: check_box_switch_two.checked
}
FluCheckBox{
disabled: check_box_switch_two.checked
text:"Right" text:"Right"
} }
FluCheckBox{ FluCheckBox{
disabled: check_box_switch.checked disabled: check_box_switch_two.checked
text:"Left" text:"Left"
textRight: false textRight: false
} }
} }
FluToggleSwitch{ FluToggleSwitch{
id:check_box_switch id:check_box_switch_two
anchors{ anchors{
right: parent.right right: parent.right
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -48,4 +56,60 @@ FluScrollablePage{
}' }'
} }
FluArea{
Layout.fillWidth: true
height: 72
paddings: 10
Layout.topMargin: 20
FluText{
text:"A 3-state CheckBox"
}
Row{
spacing: 30
anchors{
top: parent.top
topMargin: 30
}
FluCheckBox{
property int count: 1
text:"Three State"
disabled: check_box_switch_three.checked
clickListener: function(){
var flag = count%3
if(flag === 0){
checked = false
indeterminate = false
}
if(flag === 1){
checked = true
indeterminate = false
}
if(flag === 2){
checked = true
indeterminate = true
}
count++
}
}
}
FluToggleSwitch{
id:check_box_switch_three
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluCheckBox{
text:"Text"
indeterminate:true
}'
}
} }

20
src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -18,7 +18,7 @@ Button {
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3) property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
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 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 real size: 17 property real size: 18
property alias textColor: btn_text.textColor property alias textColor: btn_text.textColor
property bool textRight: true property bool textRight: true
property real textSpacing: 6 property real textSpacing: 6
@ -26,6 +26,7 @@ Button {
property var clickListener : function(){ property var clickListener : function(){
checked = !checked checked = !checked
} }
property bool indeterminate : false
id:control id:control
enabled: !disabled enabled: !disabled
onClicked: clickListener() onClicked: clickListener()
@ -98,11 +99,26 @@ Button {
duration: 83 duration: 83
} }
} }
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.CheckboxIndeterminate
iconSize: 14
visible: indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
NumberAnimation{
duration: 83
}
}
}
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 14 iconSize: 14
visible: checked visible: checked && !indeterminate
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 {
enabled: control.enableAnimation enabled: control.enableAnimation

20
src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -19,7 +19,7 @@ Button {
property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3) property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
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 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 real size: 17 property real size: 18
property alias textColor: btn_text.textColor property alias textColor: btn_text.textColor
property bool textRight: true property bool textRight: true
property real textSpacing: 6 property real textSpacing: 6
@ -27,6 +27,7 @@ Button {
property var clickListener : function(){ property var clickListener : function(){
checked = !checked checked = !checked
} }
property bool indeterminate : false
id:control id:control
enabled: !disabled enabled: !disabled
onClicked: clickListener() onClicked: clickListener()
@ -94,11 +95,26 @@ Button {
duration: 83 duration: 83
} }
} }
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.CheckboxIndeterminate
iconSize: 14
visible: indeterminate
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
enabled: control.enableAnimation
NumberAnimation{
duration: 83
}
}
}
FluIcon { FluIcon {
anchors.centerIn: parent anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium iconSource: FluentIcons.AcceptMedium
iconSize: 14 iconSize: 14
visible: checked visible: checked && !indeterminate
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 {
enabled: control.enableAnimation enabled: control.enableAnimation