Kirigami2

Card.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.Controls 2.0 as QQC2
10 import org.kde.kirigami 2.12 as Kirigami
11 import "private" as P
12 
13 /**
14  * @brief This component implements a standard layout of a card.
15  *
16  * It is recommended to use this class when the concept of Cards is needed
17  * in the application.
18  *
19  * This Card has default items as AbstractCard::header and AbstractCard::footer. The header is an
20  * image that can contain an optional title and icon, accessible via the
21  * ::banner grouped property.
22  *
23  * The footer will show a series of toolbuttons (and eventual overflow menu)
24  * representing the actions list accessible with the list property actions.
25  * It is possible even tough is discouraged to override the footer:
26  * in this case the actions property shouldn't be used.
27  *
28  * @see <a href="https://develop.kde.org/hig/components/editing/card">KDE Human Interface Guidelines on Cards</a>
29  * @since org.kde.kirigami 2.4
30  * @inherit kirigami::AbstractCard
31  */
32 Kirigami.AbstractCard {
33  id: root
34 
35  /**
36  * @brief This property holds visible actions that will be available in the footer
37  * of the card.
38  *
39  * The actions will be represented by a list of ToolButtons with an optional overflow
40  * menu, when not all of them will fit in the available Card width.
41  *
42  * @property list<kirigami::Action> Card::actions
43  */
44  property list<QtObject> actions
45 
46  /**
47  * @brief This property holds hidden actions that will be available in the footer.
48  *
49  * These actions will only be shown in the overflow menu, even when there is enough space.
50  *
51  * @deprecated Use actions with a ``Kirigami.DisplayHint.AlwaysHide`` as displayHint.
52  * @see kirigami::DisplayHint
53  * @since org.kde.kirigami 2.6
54  * @property list<kirigami::Action> hiddenActions
55  */
56  property alias hiddenActions: actionsToolBar.hiddenActions
57 
58  /**
59  * @brief This grouped property controls the banner image present in the header.
60  *
61  * This grouped property has the following sub-properties:
62  * * ``source: url``: The source for the image. It understands any URL valid for an Image component.
63  * * ``titleIcon: string``: The optional icon to put in the banner, either a freedesktop-compatible
64  * icon name (recommended) or any URL supported by QtQuick.Image.
65  * * ``title: string``: The title for the banner, shown as contrasting text over the image.
66  * * ``titleAlignment: Qt::Alignment``: The alignment of the title inside the image.
67  * default: ``Qt.AlignTop | Qt.AlignLeft``
68  * * ``titleLevel: int``: The Kirigami.Heading level for the title, which controls the font size.
69  * default: ``1``, which is the largest size.
70  * * ``titleWrapMode: QtQuick.Text.wrapMode``: Whether the header text should be able to wrap.
71  * default: ``Text.NoWrap``
72  *
73  * It also has the full set of properties that QtQuick.Image has, such as sourceSize and fillMode.
74  *
75  * @see kirigami::private::BannerImage
76  * @property Image banner
77  */
78  readonly property alias banner: bannerImage
79 
80 
81  header: P.BannerImage {
82  id: bannerImage
83  anchors.leftMargin: -root.leftPadding + root.background.border.width
84  anchors.topMargin: -root.topPadding + root.background.border.width
85  anchors.rightMargin: root.headerOrientation === Qt.Vertical ? -root.rightPadding + root.background.border.width : 0
86  anchors.bottomMargin: root.headerOrientation === Qt.Horizontal ? -root.bottomPadding + root.background.border.width : 0
87  //height: Layout.preferredHeight
88  implicitWidth: root.headerOrientation === Qt.Horizontal ? sourceSize.width : Layout.preferredWidth
89  Layout.preferredHeight: (source.toString() !== "" ? width / (sourceSize.width / sourceSize.height) : Layout.minimumHeight) + anchors.topMargin + anchors.bottomMargin
90 
91  readonly property real widthWithBorder: width + root.background.border.width * 2
92  readonly property real heightWithBorder: height + root.background.border.width * 2
93  readonly property real radiusFromBackground: root.background.radius - root.background.border.width
94 
95  corners.topLeftRadius: radiusFromBackground
96  corners.topRightRadius: (root.headerOrientation === Qt.Horizontal && widthWithBorder < root.width) ? 0 : radiusFromBackground
97  corners.bottomLeftRadius: (root.headerOrientation !== Qt.Horizontal && heightWithBorder < root.height) ? 0 : radiusFromBackground
98  corners.bottomRightRadius: heightWithBorder < root.height ? 0 : radiusFromBackground
99  }
100 
101  onHeaderChanged: {
102  if (!header) {
103  return;
104  }
105 
106  header.anchors.leftMargin = Qt.binding(() => -root.leftPadding);
107  header.anchors.topMargin = Qt.binding(() => -root.topPadding);
108  header.anchors.rightMargin = Qt.binding(() => root.headerOrientation === Qt.Vertical ? -root.rightPadding : 0);
109  header.anchors.bottomMargin = Qt.binding(() => root.headerOrientation === Qt.Horizontal ? -root.bottomPadding : 0);
110  }
111 
112  footer: Kirigami.ActionToolBar {
113  id: actionsToolBar
114  actions: root.actions
115  position: QQC2.ToolBar.Footer
116  visible: root.footer === actionsToolBar
117  }
118 }
This file is part of the KDE documentation.
Documentation copyright © 1996-2023 The KDE developers.
Generated on Mon Sep 25 2023 04:03:55 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.