diff --git a/README.md b/README.md index aac8bfb7..ca813dfa 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ ![](doc/preview/carousel.png) -## IntoBar提示框组件 +## InfoBar提示框组件 ![](doc/preview/infobar.png) diff --git a/example/T_Buttons.qml b/example/T_Buttons.qml index 0e99cbca..52e540ce 100644 --- a/example/T_Buttons.qml +++ b/example/T_Buttons.qml @@ -189,4 +189,40 @@ FluScrollablePage{ } } } + + FluArea{ + width: parent.width + height: 68 + paddings: 10 + + FluDropDownButton{ + disabled:drop_down_button_switch.selected + text:"DropDownButton" + anchors{ + verticalCenter: parent.verticalCenter + left: parent.left + } + items:[ + FluMenuItem{ + text:"asdf" + } + ] + } + + + Row{ + spacing: 5 + anchors{ + verticalCenter: parent.verticalCenter + right: parent.right + } + FluToggleSwitch{ + id:drop_down_button_switch + Layout.alignment: Qt.AlignRight + } + FluText{ + text:"Disabled" + } + } + } } diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml index a7269fbb..731f8fe7 100644 --- a/src/controls/FluButton.qml +++ b/src/controls/FluButton.qml @@ -36,7 +36,6 @@ Button { } contentItem: FluText { text: control.text - anchors.centerIn: parent horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter color: { diff --git a/src/controls/FluDropDownButton.qml b/src/controls/FluDropDownButton.qml index 17454a4f..fb668bc3 100644 --- a/src/controls/FluDropDownButton.qml +++ b/src/controls/FluDropDownButton.qml @@ -1,6 +1,79 @@ import QtQuick 2.15 +import QtQuick.Controls 2.15 import FluentUI 1.0 -Item { +Button { + + property bool disabled: false + property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1) + property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1) + property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1) + + id: control + topPadding:5 + bottomPadding:5 + leftPadding:15 + rightPadding:35 + enabled: !disabled + focusPolicy:Qt.TabFocus + + property alias items: menu.content + + Keys.onSpacePressed: control.visualFocus&&clicked() + + background: Rectangle{ + border.color: FluTheme.isDark ? "#505050" : "#DFDFDF" + border.width: 1 + radius: 4 + FluFocusRectangle{ + visible: control.visualFocus + radius:8 + } + color:{ + if(disabled){ + return disableColor + } + return hovered ? hoverColor :normalColor + } + FluIcon{ + iconSource:FluentIcons.ChevronDown + iconSize: 15 + anchors{ + right: parent.right + rightMargin: 10 + verticalCenter: parent.verticalCenter + } + color:title.color + } + + } + contentItem: FluText { + id:title + text: control.text + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: { + if(FluTheme.isDark){ + if(disabled){ + return Qt.rgba(131/255,131/255,131/255,1) + } + return Qt.rgba(1,1,1,1) + }else{ + if(disabled){ + return Qt.rgba(160/255,160/255,160/255,1) + } + return Qt.rgba(0,0,0,1) + } + } + } + + onClicked: { + menu.open() + } + + FluMenu{ + id:menu + width: control.width + } } diff --git a/src/controls/FluMenu.qml b/src/controls/FluMenu.qml index 629d4674..abac3b3f 100644 --- a/src/controls/FluMenu.qml +++ b/src/controls/FluMenu.qml @@ -6,9 +6,10 @@ Menu { id: popup default property alias content: container.data + width: 140 + height: container.height + background: Rectangle { - implicitWidth: 140 - implicitHeight: container.height color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1) radius: 5 @@ -19,6 +20,7 @@ Menu { spacing: 5 topPadding: 5 bottomPadding: 5 + width: popup.width id:container function closePopup(){ popup.close() diff --git a/src/controls/FluMenuItem.qml b/src/controls/FluMenuItem.qml index a1861d5c..0acf05e2 100644 --- a/src/controls/FluMenuItem.qml +++ b/src/controls/FluMenuItem.qml @@ -4,7 +4,12 @@ import QtQuick.Controls 2.15 Item { id:root - width: 140 + width: { + if(root.parent){ + return root.parent.width + } + return 140 + } height: 32 property string text: "MenuItem" @@ -12,7 +17,7 @@ Item { Rectangle{ anchors.centerIn: parent - width: 100 + width: root.width-40 height: 32 radius: 4 color:{ diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml index 6c41b24f..cf2be038 100644 --- a/src/controls/FluRadioButton.qml +++ b/src/controls/FluRadioButton.qml @@ -32,7 +32,7 @@ Button { if(selected&&disabled){ return 3 } - if(hovered){ + if(pressed){ if(selected){ return 5 } @@ -48,7 +48,7 @@ Button { } Behavior on border.width { NumberAnimation{ - duration: 100 + duration: 150 } } border.color: { diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml index 4165ca85..b1bc0c7f 100644 --- a/src/controls/FluToggleSwitch.qml +++ b/src/controls/FluToggleSwitch.qml @@ -61,6 +61,9 @@ Button { Behavior on x { NumberAnimation { duration: 200 } } + Behavior on scale { + NumberAnimation { duration: 150 } + } } }