Kirigami2

templates/AbstractCard.qml
1 /*
2  * SPDX-FileCopyrightText: 2018 Marco Martin <[email protected]>
3  *
4  * SPDX-License-Identifier: LGPL-2.0-or-later
5  */
6 
7 import QtQuick 2.6
8 import QtQuick.Layouts 1.2
9 import QtQuick.Templates 2.0 as T
10 import org.kde.kirigami 2.4 as Kirigami
11 
12 /**
13  * A AbstractCard is the base for cards. A Card is a visual object that serves
14  * as an entry point for more detailed information. An abstractCard is empty,
15  * providing just the look and the base properties and signals for an ItemDelegate.
16  * It can be filled with any custom layout of items, its content is organized
17  * in 3 properties: header, contentItem and footer.
18  * Use this only when you need particular custom contents, for a standard layout
19  * for cards, use the Card component.
20  *
21  * @see Card
22  * @inherit QtQuick.Controls.ItemDelegate
23  * @since 2.4
24  */
25 T.ItemDelegate {
26  id: root
27 
28 //BEGIN properties
29  /**
30  * @brief This property holds an item that serves as a header.
31  *
32  * This item will be positioned on top if headerOrientation is ``Qt.Vertical``
33  * or on the left if it is ``Qt.Horizontal``.
34  */
35  property Item header
36 
37  /**
38  * @brief This property sets the card's orientation.
39  *
40  * * ``Qt.Vertical``: the header will be positioned on top
41  * * ``Qt.Horizontal``: the header will be positioned on the left (or right if an RTL layout is used)
42  *
43  * default: ``Qt.Vertical``
44  *
45  * @property Qt::Orientation headerOrientation
46  */
47  property int headerOrientation: Qt.Vertical
48 
49  /**
50  * @brief This property holds an item that serves as a footer.
51  *
52  * This item will be positioned at the bottom if headerOrientation is ``Qt.Vertical``
53  * or on the right if it is ``Qt.Horizontal``.
54  */
55  property Item footer
56 
57  /**
58  * @brief This property sets whether clicking or tapping on the card area shows a visual click feedback.
59  *
60  * Use this if you want to do an action in the onClicked signal handler of the card.
61  *
62  * default: ``false``
63  */
64  property bool showClickFeedback: false
65 //END properties
66 
67  Layout.fillWidth: true
68 
69  implicitWidth: Math.max(background.implicitWidth, mainLayout.implicitWidth) + leftPadding + rightPadding
70  implicitHeight: mainLayout.implicitHeight + topPadding + bottomPadding
71 
72  hoverEnabled: !Kirigami.Settings.tabletMode && showClickFeedback
73  // if it's in a CardLayout, try to expand horizontal cards to both columns
74  Layout.columnSpan: headerOrientation === Qt.Horizontal && parent.hasOwnProperty("columns") ? parent.columns : 1
75 
76  Kirigami.Theme.inherit: false
77  Kirigami.Theme.colorSet: Kirigami.Theme.View
78 
79  topPadding: contentItemParent.children.length > 0 ? Kirigami.Units.largeSpacing : 0
80  leftPadding: Kirigami.Units.largeSpacing
81  bottomPadding: contentItemParent.children.length > 0 ? Kirigami.Units.largeSpacing : 0
82  rightPadding: Kirigami.Units.largeSpacing
83 
84  width: ListView.view ? ListView.view.width - ListView.view.leftMargin - ListView.view.rightMargin : undefined
85 
86  GridLayout {
87  id: mainLayout
88  rowSpacing: root.topPadding
89  columnSpacing: root.leftPadding
90  anchors {
91  top: parent.top
92  left: parent.left
93  right: parent.right
94  leftMargin: root.leftPadding
95  topMargin: root.topPadding
96  rightMargin: root.rightPadding
97  bottom: parent.bottom
98  bottomMargin: root.bottomPadding
99  }
100  columns: headerOrientation === Qt.Vertical ? 1 : 2
101  function preferredHeight(item) {
102  if (!item) {
103  return 0;
104  }
105  if (item.Layout.preferredHeight > 0) {
106  return item.Layout.preferredHeight;
107  }
108  return item.implicitHeight
109  }
110  Item {
111  id: headerParent
112  Layout.fillWidth: true
113  Layout.fillHeight: root.headerOrientation === Qt.Horizontal
114  Layout.rowSpan: root.headerOrientation === Qt.Vertical ? 1 : 2
115  Layout.preferredWidth: header ? header.implicitWidth : 0
116  Layout.preferredHeight: root.headerOrientation === Qt.Vertical ? mainLayout.preferredHeight(header) : -1
117  visible: children.length > 0
118  }
119  Item {
120  id: contentItemParent
121  Layout.fillWidth: true
122  Layout.fillHeight: true
123  Layout.topMargin: root.topPadding
124  Layout.bottomMargin: root.bottomPadding
125  Layout.preferredWidth: contentItem ? contentItem.implicitWidth : 0
126  Layout.preferredHeight: mainLayout.preferredHeight(contentItem)
127  visible: children.length > 0
128  }
129  Item {
130  id: footerParent
131  Layout.fillWidth: true
132  Layout.preferredWidth: footer ? footer.implicitWidth : 0
133  Layout.preferredHeight: mainLayout.preferredHeight(footer)
134  visible: children.length > 0
135  }
136  }
137 
138 //BEGIN signal handlers
139  onContentItemChanged: {
140  if (!contentItem) {
141  return;
142  }
143 
144  contentItem.parent = contentItemParent;
145  contentItem.anchors.fill = contentItemParent;
146  }
147  onHeaderChanged: {
148  if (!header) {
149  return;
150  }
151 
152  header.parent = headerParent;
153  header.anchors.fill = headerParent;
154  }
155  onFooterChanged: {
156  if (!footer) {
157  return;
158  }
159 
160  //make the footer always looking it's at the bottom of the card
161  footer.parent = footerParent;
162  footer.anchors.left = footerParent.left;
163  footer.anchors.top = footerParent.top;
164  footer.anchors.right = footerParent.right;
165  footer.anchors.topMargin = Qt.binding(() =>
166  (root.height - root.bottomPadding - root.topPadding) - (footerParent.y + footerParent.height));
167  }
168  Component.onCompleted: {
169  contentItemChanged();
170  }
171 //END signal handlers
172 }
QTextStream & left(QTextStream &s)
QTextStream & right(QTextStream &s)
This file is part of the KDE documentation.
Documentation copyright © 1996-2023 The KDE developers.
Generated on Tue Feb 7 2023 04:14:23 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.