Kirigami2

Card.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
11import "private" as P
12
13/**
14 * @brief This is the 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 header and 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 * @inherit org::kde::kirigami::AbstractCard
29 * @since 2.4
30 */
31Kirigami.AbstractCard {
32 id: root
33
34 /**
35 * @brief This property holds the clickable actions that will be available in the footer
36 * of the card.
37 *
38 * The actions will be represented by a list of ToolButtons with an optional overflow
39 * menu, when not all of them will fit in the available Card width.
40 *
41 * @property list<org::kde::kirigami::Action> Card::actions
42 */
43 property list<QtObject> actions
44
45 /**
46 * @brief This grouped property controls the banner image present in the header.
47 *
48 * This grouped property has the following sub-properties:
49 * * ``source: url``: The source for the image. It understands any URL valid for an Image component.
50 * * ``titleIcon: string``: The optional icon to put in the banner, either a freedesktop-compatible
51 * icon name (recommended) or any URL supported by QtQuick.Image.
52 * * ``title: string``: The title for the banner, shown as contrasting text over the image.
53 * * ``titleAlignment: Qt::Alignment``: The alignment of the title inside the image.
54 * default: ``Qt.AlignTop | Qt.AlignLeft``
55 * * ``titleLevel: int``: The Kirigami.Heading level for the title, which controls the font size.
56 * default: ``1``, which is the largest size.
57 * * ``titleWrapMode: QtQuick.Text::wrapMode``: Whether the header text should be able to wrap.
58 * default: ``Text.NoWrap``
59 *
60 * It also has the full set of properties that QtQuick.Image has, such as sourceSize and fillMode.
61 *
62 * @see org::kde::kirigami::private::BannerImage
63 * @property Image banner
64 */
65 readonly property alias banner: bannerImage
66
67
68 header: Kirigami.Padding {
69 leftPadding: -root.leftPadding + root.background.border.width
70 topPadding: -root.topPadding + root.background.border.width
71 rightPadding: -root.rightPadding + root.background.border.width
72 bottomPadding: root.contentItem ? 0: -root.bottomPadding + root.background.border.width
73 contentItem: P.BannerImage {
74 id: bannerImage
75 implicitWidth: Layout.preferredWidth
76 implicitHeight: (source.toString().length > 0 && sourceSize.width > 0 && sourceSize.height > 0 ? width / (sourceSize.width / sourceSize.height) : Layout.minimumHeight) + parent.topPadding + parent.bottomPadding
77
78 readonly property real widthWithBorder: width + root.background.border.width * 2
79 readonly property real heightWithBorder: height + root.background.border.width * 2
80 readonly property real radiusFromBackground: root.background.radius - root.background.border.width
81
82 corners.topLeftRadius: radiusFromBackground
83 corners.topRightRadius: radiusFromBackground
84 corners.bottomLeftRadius: radiusFromBackground
85 corners.bottomRightRadius: heightWithBorder < root.height ? 0 : radiusFromBackground
86
87 checkable: root.checkable
88 checked: root.checkable && root.checked
89 onToggled: (checked) => {
90 root.checked = checked
91 }
92 }
93 }
94
95 onHeaderChanged: {
96 if (!header) {
97 return;
98 }
99
100 header.anchors.leftMargin = Qt.binding(() => -root.leftPadding);
101 header.anchors.topMargin = Qt.binding(() => -root.topPadding);
102 header.anchors.rightMargin = Qt.binding(() => -root.rightPadding);
103 header.anchors.bottomMargin = Qt.binding(() => 0);
104 }
105
106 footer: Kirigami.ActionToolBar {
107 id: actionsToolBar
108 actions: root.actions
109 position: QQC2.ToolBar.Footer
110 visible: root.footer === actionsToolBar
111 }
112}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Tue Mar 26 2024 11:18:46 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.