Kirigami2

templates/AbstractCard.qml
1 /*
2  * SPDX-FileCopyrightText: 2018 Marco Martin <mart@kde.org>
3  *
4  * SPDX-License-Identifier: LGPL-2.0-or-later
5  */
6 
7 import QtQuick 2.15
8 import QtQuick.Layouts 1.15
9 import QtQuick.Templates 2.15 as T
10 import org.kde.kirigami 2.20 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 alias header: headerFooterLayout.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 alias footer: headerFooterLayout.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 
66 //END properties
67 
68  Layout.fillWidth: true
69 
70  implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
71  outerPaddingLayout.implicitWidth)
72  implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
73  outerPaddingLayout.implicitHeight)
74 
75  hoverEnabled: !Kirigami.Settings.tabletMode && showClickFeedback
76 
77  Kirigami.Theme.inherit: false
78  Kirigami.Theme.colorSet: Kirigami.Theme.View
79 
80  width: ListView.view ? ListView.view.width - ListView.view.leftMargin - ListView.view.rightMargin : undefined
81  padding: Kirigami.Units.largeSpacing
82 
83  // Card component repurposes control's contentItem property, so it has to
84  // reimplement content layout and its padding manually.
85  Kirigami.Padding {
86  id: outerPaddingLayout
87 
88  anchors.fill: parent
89 
90  topPadding: root.topPadding
91  leftPadding: root.leftPadding
92  rightPadding: root.rightPadding
93  bottomPadding: root.bottomPadding
94 
95  contentItem: Kirigami.HeaderFooterLayout {
96  id: headerFooterLayout
97 
98  contentItem: Kirigami.Padding {
99  id: innerPaddingLayout
100 
101  contentItem: root.contentItem
102 
103  // Hide it altogether, so that vertical padding won't be
104  // included in control's total implicit height.
105  visible: contentItem !== null
106 
107  topPadding: headerFooterLayout.header ? Kirigami.Units.largeSpacing : 0
108  bottomPadding: headerFooterLayout.footer ? Kirigami.Units.largeSpacing : 0
109  }
110  }
111  }
112 
113  // HACK: A Control like this ItemDelegate tries to manage its
114  // contentItem's positioning, so we need to override that. This is
115  // equivalent to declaring x/y/width/height bindings in QQC2 style
116  // implementations.
117  Connections {
118  target: root.contentItem
119 
120  function onXChanged() {
121  root.contentItem.x = 0;
122  }
123 
124  function onYChanged() {
125  root.contentItem.y = Qt.binding(() => innerPaddingLayout.topPadding);
126  }
127  }
128 }
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Thu Feb 15 2024 03:59:21 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.