FluentUI/Gallery/res/qml/component/MyTabButton.qml
yxdy ff15075c79
Some checks are pending
Gallery App Build / macOS (push) Waiting to run
Gallery App Build / Windows (push) Waiting to run
Gallery App Build / Ubuntu (push) Waiting to run
修改样式
2025-03-07 16:23:09 +08:00

89 lines
2.6 KiB
QML

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import QtQuick.Templates as T
T.TabButton {
id: control
implicitWidth: implicitBackgroundWidth
// Math.max(implicitBackgroundWidth + leftInset + rightInset,
// implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 6
spacing: 3
property var p_color: "#1B806A"
icon.width: 24
icon.height: 24
icon.color: checked ? control.palette.windowText : control.palette.brightText
contentItem: IconLabel {
id: lbl_tab
spacing: control.spacing
mirrored: control.mirrored
display: control.display
icon: control.icon
text: control.text
font: control.font
color: control.checked ? p_color : "#ffffff"
}
onCheckedChanged: {
if (!control.checked && bg_rect) {
bg_rect.color = "#242424"
}
}
background: Rectangle {
id: bg_rect
implicitHeight: 30
implicitWidth: parent.width
color: control.checked ? Qt.rgba(74/255,74/255,74/255, 0.5) : "#242424"
radius: 5
anchors{
left: parent.left
leftMargin: control.checked ? 0 : 1
top: parent.top
topMargin: control.checked ? 0 : 1
bottom: parent.bottom
bottomMargin: control.checked ? 0 : 1
right: parent.right
rightMargin: control.checked ? 0 : 1
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
if (!control.checked)
parent.color = Qt.rgba(74/255,74/255,74/255, 0.5)
}
onExited: {
if (!control.checked)
parent.color = "#242424"
}
}
border.color: '#717171' //Qt.rgba(74/255,74/255,74/255, 0.2)
border.width: control.checked ? 1 : 0
Rectangle{
visible: control.checked
width: control.text.length * 18
height: 3
color: "#22C55E"
radius: 3
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
}