src/controls/Chip.qml

0001 // SPDX-FileCopyrightText: 2022 Felipe Kinoshita <kinofhek@gmail.com>
0002 // SPDX-License-Identifier: GPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Controls as QQC2
0006 import QtQuick.Layouts
0007 import org.kde.kirigami as Kirigami
0008
0009 import "templates" as KT
0010 import "private" as P
0011
0012 /**
0013  * @brief A compact element that represents an attribute, action, or filter.
0014  *
0015  * Should be used in a group of multiple elements. e.g when displaying tags in a image viewer.
0016  *
0017  * Example usage:
0018  *  * @code
0019  * import org.kde.kirigami 2.19 as Kirigami
0020  *
0021  * Flow {
0022  *     Repeater {
0023  *         model: chipsModel
0024  *
0025  *         Kirigami.Chip {
0026  *             text: model.text
0027  *             icon.name: "tag-symbolic"
0028  *             closable: model.closable
0029  *             onClicked: {
0030  *                 [...]
0031  *             }
0032  *             onRemoved: {
0033  *                 [...]
0034  *             }
0035  *         }
0036  *     }
0037  * }
0038  * @endcode
0039  *
0040  * @since 2.19
0041  */
0042 KT.Chip {
0043     id: chip
0044
0045     implicitWidth: layout.implicitWidth
0046     implicitHeight: toolButton.implicitHeight
0047
0048     checkable: !closable
0049
0050     /**
0051      * @brief This property holds the label item; used for accessing the usual Text properties.
0052      * @property QtQuick.Controls.Label labelItem
0053      */
0054     property alias labelItem: label
0055
0056     contentItem: RowLayout {
0057         id: layout
0058         spacing: 0
0059
0060         Kirigami.Icon {
0061             id: icon
0062             visible: icon.valid
0063             Layout.preferredWidth: Kirigami.Units.iconSizes.small
0064             Layout.preferredHeight: Kirigami.Units.iconSizes.small
0065             Layout.leftMargin: Kirigami.Units.smallSpacing
0066             color: chip.icon.color
0067             isMask: chip.iconMask
0068             source: chip.icon.name || chip.icon.source
0069         }
0070         QQC2.Label {
0071             id: label
0072             Layout.fillWidth: true
0073             Layout.minimumWidth: Kirigami.Units.gridUnit * 1.5
0074             Layout.leftMargin: icon.visible ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
0075             Layout.rightMargin: chip.closable ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
0076             verticalAlignment: Text.AlignVCenter
0077             horizontalAlignment: Text.AlignHCenter
0078             text: chip.text
0079             color: Kirigami.Theme.textColor
0080             elide: Text.ElideRight
0081         }
0082         QQC2.ToolButton {
0083             id: toolButton
0084             visible: chip.closable
0085             text: qsTr("Remove Tag")
0086             icon.name: "edit-delete-remove"
0087             icon.width: Kirigami.Units.iconSizes.sizeForLabels
0088             icon.height: Kirigami.Units.iconSizes.sizeForLabels
0089             display: QQC2.AbstractButton.IconOnly
0090             onClicked: chip.removed()
0091         }
0092     }
0093
0094     background: P.DefaultChipBackground {}
0095 }