Kirigami2

Chip.qml
1// SPDX-FileCopyrightText: 2022 Felipe Kinoshita <kinofhek@gmail.com>
2// SPDX-License-Identifier: GPL-2.0-or-later
3
4import QtQuick
5import QtQuick.Controls as QQC2
6import QtQuick.Layouts
7import org.kde.kirigami as Kirigami
8
9import "templates" as KT
10import "private" as P
11
12/**
13 * @brief A compact element that represents an attribute, action, or filter.
14 *
15 * Should be used in a group of multiple elements. e.g when displaying tags in a image viewer.
16 *
17 * Example usage:
18 * * @code
19 * import org.kde.kirigami as Kirigami
20 *
21 * Flow {
22 * Repeater {
23 * model: chipsModel
24 *
25 * Kirigami.Chip {
26 * text: model.text
27 * icon.name: "tag-symbolic"
28 * closable: model.closable
29 * onClicked: {
30 * [...]
31 * }
32 * onRemoved: {
33 * [...]
34 * }
35 * }
36 * }
37 * }
38 * @endcode
39 *
40 * @since 2.19
41 */
42KT.Chip {
43 id: chip
44
45 implicitWidth: layout.implicitWidth
46 implicitHeight: toolButton.implicitHeight
47
48 checkable: !closable
49
50 /**
51 * @brief This property holds the label item; used for accessing the usual Text properties.
52 * @property QtQuick.Controls.Label labelItem
53 */
54 property alias labelItem: label
55
56 contentItem: RowLayout {
57 id: layout
58 spacing: 0
59
60 Kirigami.Icon {
61 id: icon
62 visible: icon.valid
63 Layout.preferredWidth: Kirigami.Units.iconSizes.small
64 Layout.preferredHeight: Kirigami.Units.iconSizes.small
65 Layout.leftMargin: Kirigami.Units.smallSpacing
66 color: chip.icon.color
67 isMask: chip.iconMask
68 source: chip.icon.name || chip.icon.source
69 }
70 QQC2.Label {
71 id: label
72 Layout.fillWidth: true
73 Layout.minimumWidth: Kirigami.Units.gridUnit * 1.5
74 Layout.leftMargin: icon.visible ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
75 Layout.rightMargin: chip.closable ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
76 verticalAlignment: Text.AlignVCenter
77 horizontalAlignment: Text.AlignHCenter
78 text: chip.text
79 color: Kirigami.Theme.textColor
80 elide: Text.ElideRight
81 }
82 QQC2.ToolButton {
83 id: toolButton
84 visible: chip.closable
85 text: qsTr("Remove Tag")
86 icon.name: "edit-delete-remove"
87 icon.width: Kirigami.Units.iconSizes.sizeForLabels
88 icon.height: Kirigami.Units.iconSizes.sizeForLabels
89 display: QQC2.AbstractButton.IconOnly
90 onClicked: chip.removed()
91 }
92 }
93
94 background: P.DefaultChipBackground {}
95}
QString label(StandardShortcut id)
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 12 2024 12:00:02 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.