MauiKit Controls

Chip.qml
1import QtQuick
2import QtQuick.Controls
3import QtQuick.Layouts
4
5import org.mauikit.controls as Maui
6
7/**
8 * @inherit QtQuick.Controls.ItemDelegate
9 * @since org.mauikit.controls 1.0
10 *
11 * @brief This an information element, similar to a button, but more compact.
12 *
13 * Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.
14 *
15 * This component is similar to the MauiKit Badge control, but this one is interactive.
16 * @see Badge
17 *
18 * @image html Chip/chips.png "Colorful chips"
19 *
20 * @code
21 * Flow
22 * {
23 * width: 400
24 * anchors.centerIn: parent
25 * spacing: Maui.Style.space.big
26 *
27 * Maui.Chip
28 * {
29 * text: "Chip1"
30 * color: "#757575"
31 * }
32 *
33 * Maui.Chip
34 * {
35 * text: "Chip2"
36 * icon.name: "actor"
37 * color: "#03A9F4"
38 * }
39 *
40 * Maui.Chip
41 * {
42 * text: "Chip3"
43 * icon.name: "anchor"
44 * color: "#4CAF50"
45 * }
46 *
47 * Maui.Chip
48 * {
49 * text: "Chip4"
50 * color: "#E1BEE7"
51 * }
52 *
53 * Maui.Chip
54 * {
55 * text: "Chip5"
56 * color: "#FFC107"
57 * }
58 *
59 * Maui.Chip
60 * {
61 * text: "Chip6"
62 * color: "#607D8B"
63 * }
64 *
65 * Maui.Chip
66 * {
67 * text: "Chip7"
68 * color: "#FF5722"
69 * icon.source: "/home/camiloh/Downloads/5911329.jpeg"
70 * }
71 * }
72 * @endcode
73 *
74 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/Chip.qml">You can find a more complete example at this link.</a>
75 */
76ItemDelegate
77{
78 id: control
79
80 Maui.Theme.colorSet: Maui.Theme.Tooltip
81
82 hoverEnabled: !Maui.Handy.isMobile
83 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
84 implicitWidth: _layout.implicitWidth + leftPadding + rightPadding
85
86 padding: Maui.Style.defaultPadding
87 spacing: Maui.Style.space.small
88
89 icon.height: Maui.Style.iconSize
90 icon.width: Maui.Style.iconSize
91
92 /**
93 * @brief The Label element used for the title text.
94 * This is exposed to tweak the text font properties.
95 * @property Label Chip::label
96 */
97 property alias label : _label1
98
99 /**
100 * @brief The name of the icon to be used.
101 * This is an alias to the `icon.name` group property.
102 * @property string Chip::iconSource
103 */
104 property alias iconSource : control.icon.name
105
106 /**
107 * @brief The name of the image source to be used.
108 * This is an alias to the `icon.source` group property.
109 * @property url Chip::imageSource
110 */
111 property alias imageSource : control.icon.source
112
113 /**
114 * @brief Whether a close button should be displayed, to dismiss the chip.
115 * By default it is set to `false`.
116 */
117 property bool showCloseButton : false
119 /**
120 * @brief The background color for the chip. The label text color will be adapted from this color considering the brightness, to use either a light or dark text color.
121 */
122 property color color : Maui.Theme.backgroundColor
123
124 ToolTip.visible: hovered && ToolTip.text.length > 0
125
126 /**
127 * @brief Emitted once the close button is clicked. To enable the close button see the `showCloseButton: true` property.
128 * @see showCloseButton
129 */
130 signal close()
131
132 background: Rectangle
133 {
134 id: _background
135
136 color: control.checked ? Maui.Theme.highlightColor : (control.pressed ? Qt.darker(control.color) : (control.hovered ? Qt.lighter(control.color): control.color))
137 radius: Maui.Style.radiusV
138 }
139
140 contentItem: RowLayout
141 {
142 id: _layout
143 spacing: control.spacing
144
145 Maui.IconItem
146 {
147 visible: control.imageSource.length || control.iconSource.length
148 Layout.preferredWidth: visible ? implicitWidth : -control.spacing
149 iconSizeHint: Math.max(control.icon.width, control.icon.height)
150
151 fillMode: Image.PreserveAspectCrop
152
153 color: _label1.color
154 iconSource: control.icon.name
155 imageSource: control.icon.source
156
157 maskRadius: height
158 }
159
160 Label
161 {
162 id: _label1
163 visible: text.length>0
164 text: control.text
165 Layout.fillHeight: true
166 Layout.fillWidth: true
167 verticalAlignment: Qt.AlignVCenter
168 color: Maui.ColorUtils.brightnessForColor(_background.color) === Maui.ColorUtils.Light ? "#333" :"#fafafa"
169 wrapMode: Text.Wrap
170 font: control.font
171 }
172
173 Loader
174 {
175 active: control.showCloseButton
176 visible: active
177
178 asynchronous: true
179
180 Layout.alignment: Qt.AlignRight
181
182 sourceComponent: Maui.CloseButton
183 {
184 icon.width: 16
185 icon.height: 16
186 icon.color: hovered ? Maui.Theme.negativeTextColor : _label1.color
187
188 padding: 0
189 onClicked: control.close()
190 }
191 }
192 }
193}
This file is part of the KDE documentation.
Documentation copyright © 1996-2025 The KDE developers.
Generated on Fri May 2 2025 11:57:11 by doxygen 1.13.2 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.