mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-02 08:05:29 +08:00
update
This commit is contained in:
82
src/controls/FluExpander.qml
Normal file
82
src/controls/FluExpander.qml
Normal file
@ -0,0 +1,82 @@
|
||||
import QtQuick 2.15
|
||||
import FluentUI 1.0
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
property string headerText: "Titlte"
|
||||
property bool expand: false
|
||||
|
||||
id:root
|
||||
height: layout_header.height + container.height
|
||||
width: 400
|
||||
|
||||
property int contentHeight : 300
|
||||
|
||||
default property alias content: container.data
|
||||
|
||||
Rectangle{
|
||||
id:layout_header
|
||||
width: parent.width
|
||||
height: 50
|
||||
radius: 4
|
||||
border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1)
|
||||
color: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||
|
||||
|
||||
MouseArea{
|
||||
id:root_mouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
expand = !expand
|
||||
}
|
||||
}
|
||||
|
||||
FluText{
|
||||
text: headerText
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
leftMargin: 15
|
||||
}
|
||||
}
|
||||
|
||||
FluIconButton{
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
rightMargin: 15
|
||||
}
|
||||
hoverColor: FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
|
||||
normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||
hovered: root_mouse.containsMouse
|
||||
icon: expand ? FluentIcons.FA_angle_up : FluentIcons.FA_angle_down
|
||||
onClicked: {
|
||||
expand = !expand
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Rectangle{
|
||||
id:container
|
||||
width: parent.width
|
||||
clip: true
|
||||
anchors{
|
||||
top: layout_header.bottom
|
||||
left: layout_header.left
|
||||
}
|
||||
radius: 4
|
||||
border.color: FluTheme.isDark ? Qt.rgba(53/255,53/255,53/255,1) : Qt.rgba(240/255,240/255,240/255,1)
|
||||
color: FluTheme.isDark ? Qt.rgba(57/255,57/255,57/255,1) : Qt.rgba(249/255,249/255,249/255,1)
|
||||
height: expand ? contentHeight : 0
|
||||
Behavior on height {
|
||||
NumberAnimation{
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -13,6 +13,11 @@ Rectangle {
|
||||
signal clicked
|
||||
property bool disabled: false
|
||||
property bool hovered: button_mouse.containsMouse
|
||||
|
||||
property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
|
||||
property color normalColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(1,1,1,1)
|
||||
property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(1,1,1,1)
|
||||
|
||||
property color textColor: {
|
||||
if(FluTheme.isDark){
|
||||
if(disabled){
|
||||
@ -29,17 +34,10 @@ Rectangle {
|
||||
radius: 4
|
||||
|
||||
color: {
|
||||
if(FluTheme.isDark){
|
||||
if(disabled){
|
||||
return Qt.rgba(59/255,59/255,59/255,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(50/255,50/255,50/255,1)
|
||||
}else{
|
||||
if(disabled){
|
||||
return Qt.rgba(1,1,1,1)
|
||||
}
|
||||
return button_mouse.containsMouse ? Qt.rgba(244/255,244/255,244/255,1) : Qt.rgba(1,1,1,1)
|
||||
if(disabled){
|
||||
return disableColor
|
||||
}
|
||||
return (hovered || button_mouse.containsMouse) ? hoverColor : normalColor
|
||||
}
|
||||
|
||||
Text {
|
||||
@ -69,7 +67,7 @@ Rectangle {
|
||||
if(button.text === ""){
|
||||
return false
|
||||
}
|
||||
return button_mouse.containsMouse
|
||||
return (hovered || button_mouse.containsMouse)
|
||||
}
|
||||
delay: 1000
|
||||
}
|
||||
|
Reference in New Issue
Block a user