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