Kirigami2

NavigationTabButton.qml
1/* SPDX-FileCopyrightText: 2021 Devin Lin <espidev@gmail.com>
2 * SPDX-FileCopyrightText: 2021 Noah Davis <noahadvs@gmail.com>
3 * SPDX-License-Identifier: LGPL-2.0-or-later
4 */
5
6import QtQuick
7import QtQuick.Layouts
8import QtQuick.Controls as QQC2
9import QtQuick.Templates as T
10import org.kde.kirigami as Kirigami
11
12/**
13 * @brief Navigation buttons to be used for the NavigationTabBar component.
14 *
15 * It supplies its own padding, and also supports using the QQC2 AbstractButton ``display`` property to be used in column lists.
16 *
17 * Alternative way to the "actions" property on NavigationTabBar, as it can be used
18 * with Repeater to generate buttons from models.
19 *
20 * Example usage:
21 * @code{.qml}
22 * Kirigami.NavigationTabBar {
23 * id: navTabBar
24 * Kirigami.NavigationTabButton {
25 * visible: true
26 * icon.name: "document-save"
27 * text: `test ${tabIndex + 1}`
28 * QQC2.ButtonGroup.group: navTabBar.tabGroup
29 * }
30 * Kirigami.NavigationTabButton {
31 * visible: false
32 * icon.name: "document-send"
33 * text: `test ${tabIndex + 1}`
34 * QQC2.ButtonGroup.group: navTabBar.tabGroup
35 * }
36 * actions: [
37 * Kirigami.Action {
38 * visible: true
39 * icon.name: "edit-copy"
40 * icon.height: 32
41 * icon.width: 32
42 * text: `test 3`
43 * checked: true
44 * },
45 * Kirigami.Action {
46 * visible: true
47 * icon.name: "edit-cut"
48 * text: `test 4`
49 * checkable: true
50 * },
51 * Kirigami.Action {
52 * visible: false
53 * icon.name: "edit-paste"
54 * text: `test 5`
55 * },
56 * Kirigami.Action {
57 * visible: true
58 * icon.source: "../logo.png"
59 * text: `test 6`
60 * checkable: true
61 * }
62 * ]
63 * }
64 * @endcode
65 *
66 * @since 5.87
67 * @since org.kde.kirigami 2.19
68 * @inherit QtQuick.Templates.TabButton
69 */
70T.TabButton {
71 id: control
72
73 /**
74 * @brief This property tells the index of this tab within the tab bar.
75 */
76 readonly property int tabIndex: {
77 let tabIdx = 0
78 for (const child of parent.children) {
79 if (child === this) {
80 return tabIdx
81 }
82 // Checking for AbstractButtons because any AbstractButton can act as a tab
83 if (child instanceof T.AbstractButton) {
84 ++tabIdx
85 }
86 }
87 return -1
88 }
89
90 // FIXME: all those internal properties should go, and the button should style itself in a more standard way
91 // probably similar to view items
92 readonly property color __foregroundColor: Kirigami.Theme.textColor
93 readonly property color __highlightForegroundColor: Kirigami.Theme.textColor
94
95 readonly property color __pressedColor: Qt.alpha(Kirigami.Theme.highlightColor, 0.3)
96 readonly property color __hoverSelectColor: Qt.alpha(Kirigami.Theme.highlightColor, 0.2)
97 readonly property color __checkedBorderColor: Qt.alpha(Kirigami.Theme.highlightColor, 0.7)
98 readonly property color __pressedBorderColor: Qt.alpha(Kirigami.Theme.highlightColor, 0.9)
99
100 readonly property real __verticalMargins: (display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.largeSpacing : 0
101
102 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
103 implicitContentWidth + leftPadding + rightPadding)
104 implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
105 implicitContentHeight + topPadding + bottomPadding)
106
107 display: T.AbstractButton.TextUnderIcon
108
109 Kirigami.Theme.colorSet: Kirigami.Theme.Window
110 Kirigami.Theme.inherit: false
111
112 hoverEnabled: true
113
114 padding: Kirigami.Units.smallSpacing
115 spacing: Kirigami.Units.smallSpacing
116
117 icon.height: display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
118 icon.width: display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
119 icon.color: checked ? __highlightForegroundColor : __foregroundColor
120
121 Kirigami.MnemonicData.enabled: enabled && visible
122 Kirigami.MnemonicData.controlType: Kirigami.MnemonicData.MenuItem
123 Kirigami.MnemonicData.label: text
124
125 Accessible.onPressAction: control.action.trigger()
126
127 background: Rectangle {
128 Kirigami.Theme.colorSet: Kirigami.Theme.Button
129 Kirigami.Theme.inherit: false
130
131 implicitHeight: (control.display === T.AbstractButton.TextBesideIcon) ? 0 : (Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2)
132
133 color: "transparent"
134
135 Rectangle {
136 width: parent.width - Kirigami.Units.largeSpacing
137 height: parent.height - Kirigami.Units.largeSpacing
138 anchors.centerIn: parent
139
140 radius: Kirigami.Units.cornerRadius
141 color: control.down ? control.__pressedColor : (control.checked || control.hovered ? control.__hoverSelectColor : "transparent")
142
143 border.color: control.checked ? control.__checkedBorderColor : (control.down ? control.__pressedBorderColor : color)
144 border.width: 1
145
146 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
147 Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
148 }
149 }
150
151 contentItem: GridLayout {
152 columnSpacing: 0
153 rowSpacing: (label.visible && label.lineCount > 1) ? 0 : control.spacing
154
155 // if this is a row or a column
156 columns: control.display !== T.AbstractButton.TextBesideIcon ? 1 : 2
157
158 Kirigami.Icon {
159 id: icon
160 source: control.icon.name || control.icon.source
161 visible: (control.icon.name.length > 0 || control.icon.source.toString().length > 0) && control.display !== T.AbstractButton.TextOnly
162 color: control.icon.color
163
164 Layout.topMargin: control.__verticalMargins
165 Layout.bottomMargin: control.__verticalMargins
166 Layout.leftMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
167 Layout.rightMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
168
169 Layout.alignment: {
170 if (control.display === T.AbstractButton.TextBesideIcon) {
171 // row layout
172 return Qt.AlignVCenter | Qt.AlignRight;
173 } else {
174 // column layout
175 return Qt.AlignHCenter | ((!label.visible || label.lineCount > 1) ? Qt.AlignVCenter : Qt.AlignBottom);
176 }
177 }
178 implicitHeight: source ? control.icon.height : 0
179 implicitWidth: source ? control.icon.width : 0
180
181 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
182 }
183 QQC2.Label {
184 id: label
185
186 text: control.Kirigami.MnemonicData.richTextLabel
187 horizontalAlignment: (control.display === T.AbstractButton.TextBesideIcon) ? Text.AlignLeft : Text.AlignHCenter
188
189 visible: control.display !== T.AbstractButton.IconOnly
190 wrapMode: Text.Wrap
191 elide: Text.ElideMiddle
192 color: control.checked ? control.__highlightForegroundColor : control.__foregroundColor
193
194 font.bold: control.checked
195 font.pointSize: !icon.visible && control.display === T.AbstractButton.TextBelowIcon
196 ? Kirigami.Theme.defaultFont.pointSize * 1.20 // 1.20 is equivalent to level 2 heading
197 : Kirigami.Theme.defaultFont.pointSize
198
199 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
200
201 Layout.topMargin: control.__verticalMargins
202 Layout.bottomMargin: control.__verticalMargins
203
204 Layout.alignment: {
205 if (control.display === T.AbstractButton.TextBesideIcon) {
206 // row layout
207 return Qt.AlignVCenter | Qt.AlignLeft;
208 } else {
209 // column layout
210 return icon.visible ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter;
211 }
212 }
213
214 Layout.fillWidth: true
215
216 Accessible.ignored: true
217 }
218 }
219}
Class for rendering an icon in UI.
Definition icon.h:35
char * toString(const EngineQuery &query)
QString name(StandardAction id)
QString label(StandardShortcut id)
AlignBottom
ElideMiddle
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 19 2024 11:52:23 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.