mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 11:17:15 +08:00
update
This commit is contained in:
parent
5c0befb6c2
commit
591e6bdeff
@ -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{
|
||||
|
@ -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
|
||||
FluToggleSwitch{
|
||||
id:text_button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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
|
||||
FluToggleSwitch{
|
||||
id:button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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
|
||||
FluToggleSwitch{
|
||||
id:filled_button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:filled_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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
|
||||
FluToggleSwitch{
|
||||
id:toggle_button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:toggle_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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
|
||||
FluToggleSwitch{
|
||||
id:icon_button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:icon_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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
|
||||
FluToggleSwitch{
|
||||
id:drop_down_button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:drop_down_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:radio_button_switch
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text:"Disabled"
|
||||
}
|
||||
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"
|
||||
}'
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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{
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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)
|
||||
if(hovered){
|
||||
return hoverColor
|
||||
}
|
||||
return normalColor
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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(hovered){
|
||||
return "#3E3E3C"
|
||||
}
|
||||
return "#323232"
|
||||
}else{
|
||||
if(selected){
|
||||
return FluTheme.primaryColor.dark
|
||||
}
|
||||
if(hovered){
|
||||
return "#F4F4F4"
|
||||
}
|
||||
return "#FFFFFF"
|
||||
if(disabled){
|
||||
return disableColor
|
||||
}
|
||||
if(checked){
|
||||
return checkColor
|
||||
}
|
||||
if(hovered){
|
||||
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
|
||||
|
Loading…
Reference in New Issue
Block a user