baobeld/lux-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style tab bar

Browse source
This commit is contained in:
Benjamin Palko 2025-09-16 08:36:07 -04:00
parent f687e17c94
commit 185121d0d7
2 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
components/StyledTabBar.qml
View file

@ -1,19 +1,24 @@
import QtQuick import QtQuick
import QtQuick.Controls.Basic import QtQuick.Controls
TabBar { TabBar {
id: control id: control
property alias orientation: view.orientation property alias orientation: view.orientation
contentItem: ListView { contentItem: Item {
ListView {
id: view id: view
anchors.centerIn: parent
implicitWidth: parent.width - 20
implicitHeight: parent.height - 20
model: control.contentModel model: control.contentModel
currentIndex: control.currentIndex currentIndex: control.currentIndex
spacing: control.spacing spacing: control.spacing
orientation: ListView.Horizontal orientation: ListView.Horizontal
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
} }
}
background: Item {} background: Item {}
} }

21
components/StyledTabButton.qml
View file

@ -1,6 +1,6 @@
import qs.config import qs.config
import QtQuick import QtQuick
import QtQuick.Controls.Basic import QtQuick.Controls
TabButton { TabButton {
id: control id: control
@ -14,31 +14,28 @@ TabButton {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
padding: 6 padding: 6
color: control.hovered ? Styling.theme.primarycontent : control.checked ? Styling.theme.accent : Styling.theme.basecontent color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.normal duration: Styling.animations.speed.normal
} }
} }
rotation: control.rotation
Behavior on rotation {
RotationAnimation {
duration: Styling.animations.speed.slow
easing.type: Easing.OutQuad
}
}
} }
background: Rectangle { background: Rectangle {
id: rectangle id: rectangle
color: control.hovered ? Styling.theme.primary : Styling.theme.base200 color: control.hovered ? Styling.theme.primary : Styling.theme.base100
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
duration: Styling.animations.speed.normal duration: Styling.animations.speed.normal
} }
} }
border.width: 2 opacity: control.checked || control.hovered ? 1.0 : 0.0
border.color: control.checked ? Styling.theme.accent : "transparent" Behavior on opacity {
NumberAnimation {
duration: Styling.animations.speed.normal
}
}
} }
HoverHandler { HoverHandler {