Kirigami2

BannerImage.qml
1/*
2 * SPDX-FileCopyrightText: 2018 Marco Martin <mart@kde.org>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Layouts
9import QtQuick.Controls as QQC2
10import org.kde.kirigami as Kirigami
11
12/**
13 * This Component is used as the header of GlobalDrawer and as the header
14 * of Card, It can be accessed there as a grouped property but can never
15 * be instantiated directly.
16 * \private
17 */
18Kirigami.ShadowedImage {
19 id: root
20
21//BEGIN properties
22 /**
23 * @brief This property holds an icon to be displayed alongside the title.
24 *
25 * It can be a QIcon, a FreeDesktop-compatible icon name, or any URL understood by QtQuick.Image.
26 *
27 * @property var titleIcon
28 */
29 property alias titleIcon: headingIcon.source
30
31 /**
32 * @brief This property holds the title's text which is to be displayed on top.
33 * of the image.
34 * @see QtQuick.Text::text
35 * @property string title
36 */
37 property alias title: heading.text
38
39 /**
40 * @brief This property holds the title's position.
41 *
42 * default: ``Qt.AlignTop | Qt.AlignLeft``
43 *
44 * @property Qt::Alignment titleAlignment
45 */
46 property int titleAlignment: Qt.AlignTop | Qt.AlignLeft
47
48 /**
49 * @brief This property holds the title's level.
50 *
51 * Available text size values range from 1 (largest) to 5 (smallest).
52 *
53 * default: ``1``
54 *
55 * @see org::kde::kirigami::Heading::level
56 * @property int titleLevel
57 */
58 property alias titleLevel: heading.level
59
60 /**
61 * @brief This property holds the title's wrap mode.
62 *
63 * default: ``Text.NoWrap``
64 *
65 * @see QtQuick.Text::wrapMode
66 * @property int titleWrapMode
67 */
68 property alias titleWrapMode: heading.wrapMode
69
70 /**
71 * @brief This property holds whether the title is part of an item considered
72 * checkable.
73 *
74 * If true, a checkbox will appear in the top-right corner of the title area.
75 *
76 * default: false
77 *
78 * @property bool checkable
79 */
80 property bool checkable: false
81
82 /**
83 * @brief This property holds whether the title's checkbox is currently checked.
84 *
85 * If using this outside of a GlobalDrawer or a Card, you must manually bind
86 * this to the checked condition of the parent item, or whatever else in your
87 * UI signals checkability. You must also handle the `toggled` signal when
88 * the user manually clicks the checkbox.
89 *
90 * default: false
91 *
92 * @property bool checked
93 */
94 property bool checked: false
95
96 property int leftPadding: headingIcon.valid ? Kirigami.Units.smallSpacing * 2 : Kirigami.Units.largeSpacing
97 property int topPadding: headingIcon.valid ? Kirigami.Units.smallSpacing * 2 : Kirigami.Units.largeSpacing
98 property int rightPadding: headingIcon.valid ? Kirigami.Units.smallSpacing * 2 : Kirigami.Units.largeSpacing
99 property int bottomPadding: headingIcon.valid ? Kirigami.Units.smallSpacing * 2 : Kirigami.Units.largeSpacing
100
101 property int implicitWidth: Layout.preferredWidth
102
103 readonly property bool empty: title.length === 0 && // string
104 source.toString().length === 0 && // QUrl
105 !titleIcon // QVariant hanled by Kirigami.Icon
106//END properties
107
108 signal toggled(bool checked)
109
110 Layout.fillWidth: true
111
112 Layout.preferredWidth: titleLayout.implicitWidth || sourceSize.width
113 Layout.preferredHeight: titleLayout.completed && source.toString().length > 0 ? width/(sourceSize.width / sourceSize.height) : Layout.minimumHeight
114 Layout.minimumHeight: titleLayout.implicitHeight > 0 ? titleLayout.implicitHeight + Kirigami.Units.smallSpacing * 2 : 0
115
116 onTitleAlignmentChanged: {
117 // VERTICAL ALIGNMENT
118 titleLayout.anchors.top = undefined
119 titleLayout.anchors.verticalCenter = undefined
120 titleLayout.anchors.bottom = undefined
121 shadowedRectangle.anchors.top = undefined
122 shadowedRectangle.anchors.verticalCenter = undefined
123 shadowedRectangle.anchors.bottom = undefined
124
125 if (root.titleAlignment & Qt.AlignTop) {
126 titleLayout.anchors.top = root.top
127 shadowedRectangle.anchors.top = root.top
128 }
129 else if (root.titleAlignment & Qt.AlignVCenter) {
130 titleLayout.anchors.verticalCenter = root.verticalCenter
131 shadowedRectangle.anchors.verticalCenter = root.verticalCenter
132 }
133 else if (root.titleAlignment & Qt.AlignBottom) {
134 titleLayout.anchors.bottom = root.bottom
135 shadowedRectangle.anchors.bottom = root.bottom
136 }
137
138 // HORIZONTAL ALIGNMENT
139 titleLayout.anchors.left = undefined
140 titleLayout.anchors.horizontalCenter = undefined
141 titleLayout.anchors.right = undefined
142 if (root.titleAlignment & Qt.AlignRight) {
143 titleLayout.anchors.right = root.right
144 }
145 else if (root.titleAlignment & Qt.AlignHCenter) {
146 titleLayout.anchors.horizontalCenter = root.horizontalCenter
147 }
148 else if (root.titleAlignment & Qt.AlignLeft) {
149 titleLayout.anchors.left = root.left
150 }
151 }
152 fillMode: Image.PreserveAspectCrop
153 asynchronous: true
154
155 color: "transparent"
156
157 Component.onCompleted: {
158 titleLayout.completed = true;
159 }
160
161 Kirigami.ShadowedRectangle {
162 id: shadowedRectangle
163 anchors {
164 left: parent.left
165 right: parent.right
166 }
167 height: Math.min(parent.height, titleLayout.height * 1.5)
168
169 opacity: 0.5
170 color: "black"
171
172 corners.topLeftRadius: root.titleAlignment & Qt.AlignTop ? root.corners.topLeftRadius : 0
173 corners.topRightRadius: root.titleAlignment & Qt.AlignTop ? root.corners.topRightRadius : 0
174 corners.bottomLeftRadius: root.titleAlignment & Qt.AlignBottom ? root.corners.bottomLeftRadius : 0
175 corners.bottomRightRadius: root.titleAlignment & Qt.AlignBottom ? root.corners.bottomRightRadius : 0
176
177 visible: root.source.toString().length !== 0 && root.title.length !== 0 && ((root.titleAlignment & Qt.AlignTop) || (root.titleAlignment & Qt.AlignVCenter) || (root.titleAlignment & Qt.AlignBottom))
178 }
179
180 RowLayout {
181 id: titleLayout
182 property bool completed: false
183 anchors {
184 leftMargin: root.leftPadding
185 topMargin: root.topPadding
186 rightMargin: root.rightPadding
187 bottomMargin: root.bottomPadding
188 }
189 width: Math.min(implicitWidth, parent.width -root.leftPadding -root.rightPadding - (checkboxLoader.active ? Kirigami.Units.largeSpacing : 0))
190 height: Math.min(implicitHeight, parent.height -root.topPadding -root.bottomPadding)
191 Kirigami.Icon {
192 id: headingIcon
193 Layout.minimumWidth: Kirigami.Units.iconSizes.large
194 Layout.minimumHeight: width
195 visible: valid
196 isMask: false
197 }
198 Kirigami.Heading {
199 id: heading
200 Layout.fillWidth: true
201 Layout.fillHeight: true
202 verticalAlignment: Text.AlignVCenter
203 visible: text.length > 0
204 level: 1
205 color: root.source.toString().length > 0 ? "white" : Kirigami.Theme.textColor
206 wrapMode: Text.NoWrap
207 elide: Text.ElideRight
208 }
209 }
210
211 Loader {
212 id: checkboxLoader
213 anchors {
214 top: parent.top
215 right: parent.right
216 topMargin: root.topPadding
217 }
218 active: root.checkable
219 sourceComponent: QQC2.CheckBox {
220 checked: root.checked
221 onToggled: root.toggled(checked);
222 }
223 }
224}
QStringView level(QStringView ifopt)
qsizetype length() const const
QString toString() const const
QTextStream & left(QTextStream &stream)
QTextStream & right(QTextStream &stream)
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 1 2024 18:46:45 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.