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

KDE's Doxygen guidelines are available online.