wuyize
/
FluentUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

main
zhuzihcu 2023-05-26 13:49:32 +08:00
parent 5c0befb6c2
commit 591e6bdeff
12 changed files with 177 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/qml/TestWindow.qml
View File

@ -52,8 +52,8 @@ FluWindow {
text:lang.dark_mode
}
FluToggleSwitch{
selected: FluTheme.dark
clickFunc:function(){
checked: FluTheme.dark
onClicked: {
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{

150
example/qml/page/T_Buttons.qml
View File

@ -22,7 +22,7 @@ FluScrollablePage{
Layout.topMargin: 20
FluTextButton{
disabled:text_button_switch.selected
disabled:text_button_switch.checked
text:"Text Button"
onClicked: {
showInfo("点击Text Button")
@ -32,18 +32,13 @@ FluScrollablePage{
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:text_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
@ -64,7 +59,7 @@ FluScrollablePage{
Layout.topMargin: 20
FluButton{
disabled:button_switch.selected
disabled:button_switch.checked
text:"Standard Button"
onClicked: {
showInfo("点击StandardButton")
@ -74,18 +69,13 @@ FluScrollablePage{
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
@ -106,7 +96,7 @@ FluScrollablePage{
paddings: 10
FluFilledButton{
disabled:filled_button_switch.selected
disabled:filled_button_switch.checked
text:"Filled Button"
onClicked: {
showWarning("点击FilledButton"+height)
@ -116,18 +106,13 @@ FluScrollablePage{
left: parent.left
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:filled_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
@ -148,28 +133,20 @@ FluScrollablePage{
paddings: 10
FluToggleButton{
disabled:toggle_button_switch.selected
disabled:toggle_button_switch.checked
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"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
@ -178,7 +155,7 @@ FluScrollablePage{
code:'FluToggleButton{
text:"Toggle Button"
onClicked: {
selected = !selected
checked = !checked
}
}'
}
@ -191,7 +168,7 @@ FluScrollablePage{
Layout.topMargin: 20
FluIconButton{
iconSource:FluentIcons.ChromeCloseContrast
disabled:icon_button_switch.selected
disabled:icon_button_switch.checked
iconSize: 15
anchors{
verticalCenter: parent.verticalCenter
@ -201,18 +178,13 @@ FluScrollablePage{
showSuccess("点击IconButton")
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:icon_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
@ -232,7 +204,7 @@ FluScrollablePage{
paddings: 10
Layout.topMargin: 20
FluDropDownButton{
disabled:drop_down_button_switch.selected
disabled:drop_down_button_switch.checked
text:"DropDownButton"
anchors{
verticalCenter: parent.verticalCenter
@ -253,17 +225,13 @@ FluScrollablePage{
}
]
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:drop_down_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
@ -304,35 +272,29 @@ FluScrollablePage{
property int selecIndex : 0
model: 3
delegate: FluRadioButton{
selected : repeater.selecIndex===index
disabled:radio_button_switch.selected
checked : repeater.selecIndex===index
disabled:radio_button_switch.checked
text:"Radio Button_"+index
onClicked:{
clickListener:function(){
repeater.selecIndex = index
}
}
}
}
Row{
spacing: 5
anchors{
verticalCenter: parent.verticalCenter
right: parent.right
}
FluToggleSwitch{
id:radio_button_switch
Layout.alignment: Qt.AlignRight
text:"Disabled"
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -1
code:'FluRadioButton{
selected:true
checked:true
text:"Text Button"
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"
}'
}
}

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

@ -18,11 +18,21 @@ FluScrollablePage{
spacing: 30
anchors.verticalCenter: parent.verticalCenter
FluCheckBox{
disabled: check_box_switch.checked
}
FluCheckBox{
disabled: check_box_switch.checked
text:"Text"
}
}
FluToggleSwitch{
id:check_box_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true

8
example/qml/page/T_TextBox.qml
View File

@ -19,7 +19,7 @@ FluScrollablePage{
Layout.topMargin: 20
placeholderText: "单行输入框"
Layout.preferredWidth: 300
disabled:text_box_switch.selected
disabled:text_box_switch.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
@ -57,7 +57,7 @@ FluScrollablePage{
Layout.topMargin: 20
placeholderText: "请输入密码"
Layout.preferredWidth: 300
disabled:password_box_switch.selected
disabled:password_box_switch.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
@ -97,7 +97,7 @@ FluScrollablePage{
Layout.topMargin: 20
placeholderText: "多行输入框"
Layout.preferredWidth: 300
disabled:text_box_multi_switch.selected
disabled:text_box_multi_switch.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left
@ -137,7 +137,7 @@ FluScrollablePage{
placeholderText: "AutoSuggestBox"
Layout.preferredWidth: 300
items:generateRandomNames(100)
disabled:text_box_suggest_switch.selected
disabled:text_box_suggest_switch.checked
anchors{
verticalCenter: parent.verticalCenter
left: parent.left

8
example/qml/page/T_Theme.qml
View File

@ -52,8 +52,8 @@ FluScrollablePage{
}
FluToggleSwitch{
Layout.topMargin: 5
selected: FluTheme.dark
clickFunc:function(){
checked: FluTheme.dark
onClicked: {
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{
@ -67,8 +67,8 @@ FluScrollablePage{
}
FluToggleSwitch{
Layout.topMargin: 5
selected: FluTheme.nativeText
clickFunc:function(){
checked: FluTheme.nativeText
onClicked: {
FluTheme.nativeText = !FluTheme.nativeText
}
}

11
example/qml/page/T_ToggleSwitch.qml
View File

@ -18,11 +18,20 @@ FluScrollablePage{
spacing: 30
anchors.verticalCenter: parent.verticalCenter
FluToggleSwitch{
disabled: toggle_switch.checked
}
FluToggleSwitch{
text:"Text"
disabled: toggle_switch.checked
}
}
FluToggleSwitch{
id:toggle_switch
anchors{
right: parent.right
verticalCenter: parent.verticalCenter
}
text:"Disabled"
}
}
CodeExpander{
Layout.fillWidth: true

4
src/imports/FluentUI/Controls/FluAppBar.qml
View File

@ -67,8 +67,8 @@ Rectangle{
color:root.textColor
}
FluToggleSwitch{
selected: FluTheme.dark
clickFunc:function(){
checked: FluTheme.dark
clickListener: function(){
if(FluTheme.dark){
FluTheme.darkMode = FluDarkMode.Light
}else{

49
src/imports/FluentUI/Controls/FluCheckBox.qml
View File

@ -5,36 +5,28 @@ import QtQuick.Layouts
import FluentUI
Button {
property bool selected: false
property var clickFunc
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 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 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 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 selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.15) : Qt.lighter(selectedColor,1.15)
property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,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 checkedHoverColor: FluTheme.dark ? Qt.darker(checkedColor,1.15) : Qt.lighter(checkedColor,1.15)
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 var clickListener : function(){
checked = !checked
}
id:control
enabled: !disabled
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
padding:0
onClicked: {
if(disabled){
return
}
if(clickFunc){
clickFunc()
return
}
selected = !selected
}
onClicked: clickListener()
background: Item{
FluFocusRectangle{
visible: control.visualFocus
@ -50,8 +42,8 @@ Button {
if(disabled){
return borderDisableColor
}
if(selected){
return borderSelectedColor
if(checked){
return bordercheckedColor
}
if(pressed){
return borderPressedColor
@ -63,17 +55,20 @@ Button {
}
border.width: 1
color: {
if(selected){
if(checked){
if(disabled){
return selectedDisableColor
return checkedDisableColor
}
if(pressed){
return selectedPreesedColor
return checkedPreesedColor
}
if(hovered){
return selectedHoverColor
return checkedHoverColor
}
return selectedColor
return checkedColor
}
if(disabled){
return disableColor
}
if(hovered){
return hoverColor
@ -82,18 +77,18 @@ Button {
}
Behavior on color {
ColorAnimation{
duration: 150
duration: 83
}
}
FluIcon {
anchors.centerIn: parent
iconSource: FluentIcons.AcceptMedium
iconSize: 15
visible: selected
visible: checked
iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
Behavior on visible {
NumberAnimation{
duration: 150
duration: 83
}
}
}

16
src/imports/FluentUI/Controls/FluPagination.qml
View File

@ -25,7 +25,7 @@ Item {
visible: control.pageCount>1
disabled: control.pageCurrent<=1
text:control.previousText
onClicked: {
clickListener:function() {
control.calcNewPage(control.pageCurrent-1);
}
}
@ -35,9 +35,9 @@ Item {
property int pageNumber:1
visible: control.pageCount>0
enabled: control.pageCurrent>1
selected: pageNumber === control.pageCurrent
checked: pageNumber === control.pageCurrent
text:String(pageNumber)
onClicked: {
clickListener:function() {
control.calcNewPage(pageNumber);
}
}
@ -58,8 +58,8 @@ Item {
:(control.pageCurrent+2+index-control.__pageButtonHalf)
}
text:String(pageNumber)
selected: pageNumber === control.pageCurrent
onClicked: {
checked: pageNumber === control.pageCurrent
clickListener:function(){
control.calcNewPage(pageNumber);
}
}
@ -72,9 +72,9 @@ Item {
FluToggleButton{
property int pageNumber:control.pageCount
visible: control.pageCount>1
selected: pageNumber === control.pageCurrent
checked: pageNumber === control.pageCurrent
text:String(pageNumber)
onClicked: {
clickListener:function(){
control.calcNewPage(pageNumber);
}
}
@ -83,7 +83,7 @@ Item {
visible: control.pageCount>1
disabled: control.pageCurrent>=control.pageCount
text:control.nextText
onClicked: {
clickListener:function() {
control.calcNewPage(control.pageCurrent+1);
}
}

58
src/imports/FluentUI/Controls/FluRadioButton.qml
View File

@ -5,8 +5,15 @@ import QtQuick.Layouts
import FluentUI
Button {
property bool selected: 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
enabled: !disabled
focusPolicy:Qt.TabFocus
@ -18,6 +25,7 @@ Button {
}
font:FluTextStyle.Body
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: clickListener()
contentItem: RowLayout{
Rectangle{
id:rect_check
@ -25,22 +33,22 @@ Button {
height: 20
radius: 10
border.width: {
if(selected&&disabled){
if(checked&&disabled){
return 3
}
if(pressed){
if(selected){
if(checked){
return 5
}
return 1
}
if(hovered){
if(selected){
if(checked){
return 3
}
return 1
}
return selected ? 5 : 1
return checked ? 5 : 1
}
Behavior on border.width {
NumberAnimation{
@ -51,46 +59,18 @@ Button {
}
border.color: {
if(disabled){
if(FluTheme.dark){
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 borderDisableColor
}
return borderNormalColor
}
color:{
if(disabled&&selected){
return Qt.rgba(159/255,159/255,159/255,1)
if(disabled){
return disableColor
}
if(FluTheme.dark){
if(hovered){
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 hoverColor
}
return normalColor
}
}
FluText{

23
src/imports/FluentUI/Controls/FluToggleButton.qml
View File

@ -6,42 +6,43 @@ import FluentUI
Button {
property bool disabled: false
property bool selected: false
property color normalColor: {
if(selected){
if(checked){
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
}else{
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
}
}
property color hoverColor: {
if(selected){
if(checked){
return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
}else{
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
}
}
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)
}else{
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)
id: control
enabled: !disabled
Keys.onSpacePressed: control.visualFocus&&clicked()
focusPolicy:Qt.TabFocus
horizontalPadding:12
onClicked: clickListener()
background: Rectangle{
implicitWidth: 28
implicitHeight: 28
radius: 4
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
border.width: selected ? 0 : 1
border.width: checked ? 0 : 1
FluFocusRectangle{
visible: control.visualFocus
radius:8
@ -50,7 +51,7 @@ Button {
if(disabled){
return disableColor
}
if(selected){
if(checked){
if(pressed){
return pressedColor
}
@ -63,7 +64,7 @@ Button {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: {
if(selected){
if(checked){
if(FluTheme.dark){
if(disabled){
return Qt.rgba(173/255,173/255,173/255,1)
@ -77,7 +78,7 @@ Button {
if(disabled){
return Qt.rgba(131/255,131/255,131/255,1)
}
if(!selected){
if(!checked){
if(pressed){
return Qt.rgba(162/255,162/255,162/255,1)
}
@ -87,7 +88,7 @@ Button {
if(disabled){
return Qt.rgba(160/255,160/255,160/255,1)
}
if(!selected){
if(!checked){
if(pressed){
return Qt.rgba(96/255,96/255,96/255,1)
}

74
src/imports/FluentUI/Controls/FluToggleSwitch.qml
View File

@ -5,22 +5,26 @@ import QtQuick.Layouts
import FluentUI
Button {
property bool selected: false
property var clickFunc
property bool disabled: 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 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
height: 20
enabled: !disabled
implicitHeight: height
focusPolicy:Qt.TabFocus
Keys.onSpacePressed: control.visualFocus&&clicked()
onClicked: {
if(clickFunc){
clickFunc()
return
}
selected = !selected
}
onClicked: clickListener()
contentItem: Item{}
background : RowLayout{
spacing: 0
@ -34,39 +38,45 @@ Button {
radius: 20
}
color: {
if(FluTheme.dark){
if(selected){
return FluTheme.primaryColor.dark
if(disabled){
return disableColor
}
if(checked){
return checkColor
}
if(hovered){
return "#3E3E3C"
}
return "#323232"
}else{
if(selected){
return FluTheme.primaryColor.dark
}
if(hovered){
return "#F4F4F4"
}
return "#FFFFFF"
return hoverColor
}
return normalColor
}
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 {
width: pressed ? 28 : 20
anchors{
left: selected ? undefined : parent.left
leftMargin: selected ? 20 : 0
right: selected ? parent.right : undefined
rightMargin: selected ? 0: 20
left: checked ? undefined : parent.left
leftMargin: checked ? 20 : 0
right: checked ? parent.right : undefined
rightMargin: checked ? 0: 20
}
height: 20
radius: 10
scale: hovered ? 7/10 : 6/10
scale: hovered&!disabled ? 7/10 : 6/10
anchors.verticalCenter: parent.verticalCenter
color: selected ? "#FFFFFF" : "#666666"
color: {
if(checked){
return dotCheckColor
}
return dotNormalColor
}
Behavior on anchors.leftMargin {
NumberAnimation {
duration: 167