Kirigami-addons

SegmentedButton.qml
1// SPDX-FileCopyrightText: 2023 Carl Schwan <carlschwan@kde.org>
2// SPDX-License-Identifier: LGPL-2.0-or-later
3
4import QtQuick 2.15
5import QtQuick.Controls 2.15 as QQC2
6import QtQuick.Templates 2.15 as T
7import QtQuick.Layouts 1.15
8import org.kde.kirigami 2.20 as Kirigami
9import org.kde.kirigamiaddons.delegates 1.0 as Delegates
10
11/**
12 * Segmented button component. This holds multiple buttons.
13 */
14RowLayout {
15 id: root
16
17 /**
18 * This property holds individual actions representing the buttons of the segmented button.
19 */
20 property list<T.Action> actions
21
22 spacing: Math.round(Kirigami.Units.smallSpacing / 2)
23
24 Repeater {
25 id: buttonRepeater
26
27 model: root.actions
28
29 delegate: QQC2.AbstractButton {
30 id: buttonDelegate
31
32 required property int index
33 required property T.Action modelData
34
35 property bool highlightBackground: down || checked
36 property bool highlightBorder: enabled && down || checked || visualFocus || hovered
37
38 padding: Kirigami.Units.mediumSpacing
39
40 focus: index === 0
41
42 action: modelData
43
44 display: modelData.displayHint & Kirigami.DisplayHint.IconOnly ? QQC2.AbstractButton.IconOnly : QQC2.AbstractButton.TextBesideIcon
45
46 Layout.fillHeight: true
47 Layout.minimumWidth: height
48
49 icon {
50 width: Kirigami.Units.iconSizes.smallMedium
51 height: Kirigami.Units.iconSizes.smallMedium
52 }
53
54 contentItem: Delegates.DefaultContentItem {
55 itemDelegate: buttonDelegate
56 iconItem.Layout.fillWidth: buttonDelegate.modelData instanceof Kirigami.Action
57 ? buttonDelegate.modelData.displayHint & Kirigami.DisplayHint.IconOnly
58 : true
59
60 labelItem {
61 elide: Text.ElideRight
62 horizontalAlignment: Text.AlignHCenter
63 Layout.fillWidth: true
64 Accessible.ignored: true
65 }
66 }
67
68 background: Kirigami.ShadowedRectangle {
69
70 property color flatColor: Qt.rgba(
71 Kirigami.Theme.backgroundColor.r,
72 Kirigami.Theme.backgroundColor.g,
73 Kirigami.Theme.backgroundColor.b,
74 0
75 )
76
77 corners {
78 topLeftRadius: buttonDelegate.index === 0 ? Kirigami.Units.mediumSpacing : 0
79 bottomLeftRadius: buttonDelegate.index === 0 ? Kirigami.Units.mediumSpacing : 0
80
81 bottomRightRadius: buttonDelegate.index === buttonRepeater.count - 1 ? Kirigami.Units.mediumSpacing : 0
82 topRightRadius: buttonDelegate.index === buttonRepeater.count - 1 ? Kirigami.Units.mediumSpacing : 0
83 }
84
85 visible: !buttonDelegate.flat || buttonDelegate.editable || buttonDelegate.down || buttonDelegate.checked || buttonDelegate.highlighted || buttonDelegate.visualFocus || buttonDelegate.hovered
86
87 color: {
88 if (buttonDelegate.highlightBackground) {
89 return Kirigami.Theme.alternateBackgroundColor
90 } else if (buttonDelegate.flat) {
91 return flatColor
92 } else {
93 return Kirigami.Theme.backgroundColor
94 }
95 }
96
97 border {
98 color: {
99 if (buttonDelegate.highlightBorder) {
100 return Kirigami.Theme.focusColor
101 } else {
102 return Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast);
103 }
104 }
105 width: 1
106 }
107
108 Behavior on color {
109 enabled: buttonDelegate.highlightBackground
110 ColorAnimation {
111 duration: Kirigami.Units.shortDuration
112 easing.type: Easing.OutCubic
113 }
114 }
115 Behavior on border.color {
116 enabled: buttonDelegate.highlightBorder
117 ColorAnimation {
118 duration: Kirigami.Units.shortDuration
119 easing.type: Easing.OutCubic
120 }
121 }
122
123 Kirigami.ShadowedRectangle {
124 id: root
125
126 height: buttonDelegate.height
127 z: -1
128 color: Qt.rgba(0, 0, 0, 0.1)
129
130 opacity: buttonDelegate.down ? 0 : 1
131 visible: !buttonDelegate.editable && !buttonDelegate.flat && buttonDelegate.enabled
132
133 corners {
134 topLeftRadius: buttonDelegate.index === 0 ? Kirigami.Units.mediumSpacing : 0
135 bottomLeftRadius: buttonDelegate.index === 0 ? Kirigami.Units.mediumSpacing : 0
136
137 bottomRightRadius: buttonDelegate.index === buttonRepeater.count - 1 ? Kirigami.Units.mediumSpacing : 0
138 topRightRadius: buttonDelegate.index === buttonRepeater.count - 1 ? Kirigami.Units.mediumSpacing : 0
139 }
140
141 anchors {
142 top: parent.top
143 topMargin: 1
144 left: parent.left
145 right: parent.right
146 }
147 }
148 }
149 }
150 }
151}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Dec 6 2024 12:05:53 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.