mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 11:17:15 +08:00
update
This commit is contained in:
朱子楚\zhuzi
parent
68127a7303
commit
1b6743efeb
@ -11,27 +11,35 @@ FluScrollablePage{
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
height: 72
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluText{
|
||||
text:"A 2-state CheckBox"
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
anchors{
|
||||
top: parent.top
|
||||
topMargin: 30
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
disabled: check_box_switch_two.checked
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch_two.checked
|
||||
text:"Right"
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
disabled: check_box_switch_two.checked
|
||||
text:"Left"
|
||||
textRight: false
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:check_box_switch
|
||||
id:check_box_switch_two
|
||||
anchors{
|
||||
right: parent.right
|
||||
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
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -12,27 +12,35 @@ FluScrollablePage{
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
height: 68
|
||||
height: 72
|
||||
paddings: 10
|
||||
Layout.topMargin: 20
|
||||
|
||||
FluText{
|
||||
text:"A 2-state CheckBox"
|
||||
}
|
||||
|
||||
Row{
|
||||
spacing: 30
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
anchors{
|
||||
top: parent.top
|
||||
topMargin: 30
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
disabled: check_box_switch_two.checked
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch_two.checked
|
||||
text:"Right"
|
||||
}
|
||||
FluCheckBox{
|
||||
disabled: check_box_switch.checked
|
||||
disabled: check_box_switch_two.checked
|
||||
text:"Left"
|
||||
textRight: false
|
||||
}
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:check_box_switch
|
||||
id:check_box_switch_two
|
||||
anchors{
|
||||
right: parent.right
|
||||
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
|
||||
}'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ Button {
|
||||
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 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 bool textRight: true
|
||||
property real textSpacing: 6
|
||||
@ -26,6 +26,7 @@ Button {
|
||||
property var clickListener : function(){
|
||||
checked = !checked
|
||||
}
|
||||
property bool indeterminate : false
|
||||
id:control
|
||||
enabled: !disabled
|
||||
onClicked: clickListener()
|
||||
@ -98,11 +99,26 @@ Button {
|
||||
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 {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 14
|
||||
visible: checked
|
||||
visible: checked && !indeterminate
|
||||
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
Behavior on visible {
|
||||
enabled: control.enableAnimation
|
||||
|
||||
@ -19,7 +19,7 @@ Button {
|
||||
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 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 bool textRight: true
|
||||
property real textSpacing: 6
|
||||
@ -27,6 +27,7 @@ Button {
|
||||
property var clickListener : function(){
|
||||
checked = !checked
|
||||
}
|
||||
property bool indeterminate : false
|
||||
id:control
|
||||
enabled: !disabled
|
||||
onClicked: clickListener()
|
||||
@ -94,11 +95,26 @@ Button {
|
||||
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 {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 14
|
||||
visible: checked
|
||||
visible: checked && !indeterminate
|
||||
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
Behavior on visible {
|
||||
enabled: control.enableAnimation
|
||||
|
||||
Loading…
Reference in New Issue
Block a user