Kirigami2

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

KDE's Doxygen guidelines are available online.