MauiKit Controls

ColorsRow.qml
1import QtQuick
2import QtQuick.Controls
3
4import org.mauikit.controls as Maui
5
6/**
7 * @inherit QtQuick.Flow
8 * @brief A row of color buttons
9 *
10 * @image html Misc/colorsrow.png "Demo"
11 *
12 * @code
13 * Column
14 * {
15 * width: 400
16 * anchors.centerIn: parent
17 * spacing: Maui.Style.space.big
18 *
19 * Maui.ColorsRow
20 * {
21 * id: _colorsRow
22 * width: parent.width
23 *
24 * currentColor: "#CBFF8C"
25 * defaultColor : "#CBFF8C"
26 *
27 * colors: ["#E3E36A", "#CBFF8C", "#C16200", "#881600", "#6A3937", "#706563", "#748386", "#157A6E", "#77B28C", "#36311F"]
28 *
29 * onColorPicked: (color) =>
30 * {
31 * currentColor = color
32 * }
33 * }
34 *
35 * Rectangle
36 * {
37 * radius: 10
38 * height: 400
39 * width: parent.width
40 * color: _colorsRow.currentColor
41 * }
42 * }
43 * @endcode
44 *
45 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/ColorsRow.qml">You can find a more complete example at this link.</a>
46 */
47Flow
48{
49 id: control
50
51 spacing: Maui.Style.defaultSpacing
53 /**
54 * @brief The list of colors to be used.
55 */
56 default property var colors : []
57
58 /**
59 * @brief The default color. This is used as the color when the reset/clear button is clicked. The color to reset back to.
60 */
61 property string defaultColor
62
63 /**
64 * @brief The current color. This is useful to be set at startup, it is binded to the `defaultColor` as default.
65 */
66 property string currentColor : defaultColor
67
68 /**
69 * @brief The size of the elements in the row.
70 */
71 property int size : Maui.Handy.isMobile ? 26 : Maui.Style.iconSizes.medium
72
73 /**
74 * @brief Emitted when one of the color buttons has been clicked. The argument is the color picked.
75 * @param color the color picked.
76 *
77 * @code
78 * onColorPicked: (color) =>
79 * {
80 * currentColor = color
81}
82* @endcode
83*/
84 signal colorPicked (string color)
85
86 Repeater
87 {
88 model: control.colors
89
90 AbstractButton
91 {
92 id: _button
93 checked : control.currentColor === modelData
94 implicitHeight: control.size + topPadding + bottomPadding
95 implicitWidth: implicitHeight + leftPadding + rightPadding
96 hoverEnabled: true
97 onClicked: control.colorPicked(modelData)
98
99 property color color : modelData
100
101 contentItem: Item
102 {
103 Maui.Icon
104 {
105 visible: opacity > 0
106 color: Maui.ColorUtils.brightnessForColor(_button.color) === Maui.ColorUtils.Light ? "#333" : "#fff"
107 anchors.centerIn: parent
108 height: Math.round(parent.height * 0.9)
109 width: height
110 opacity: checked || hovered ? 1 : 0
111 isMask: true
112
113 source: "qrc:/assets/checkmark.svg"
114
115 Behavior on opacity
116 {
117 NumberAnimation
118 {
119 duration: Maui.Style.units.shortDuration
120 easing.type: Easing.InOutQuad
121 }
122 }
123 }
124 }
125
126 background: Rectangle
127 {
128 radius: Maui.Style.radiusV
129 color: enabled ? modelData : "transparent"
130 }
131 }
132 }
133
134 Loader
135 {
136 asynchronous: true
137 active: control.defaultColor.length
138 sourceComponent: Item
139 {
140 implicitHeight: control.size
141 implicitWidth: implicitHeight
142
143 ToolButton
144 {
145 flat: true
146 anchors.centerIn: parent
147 icon.name: "edit-clear"
148 onClicked:
149 {
150 control.colorPicked(control.defaultColor)
151 }
152 }
153 }
154 }
155}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 8 2024 11:48:43 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.