Kirigami2

DefaultCardBackground.qml
1 
2 /*
3  * SPDX-FileCopyrightText: 2019 Marco Martin <[email protected]>
4  *
5  * SPDX-License-Identifier: LGPL-2.0-or-later
6  */
7 import QtQuick 2.15
8 import org.kde.kirigami 2.15 as Kirigami
9 
10 /**
11  * @brief This is the default background for Cards.
12  *
13  * It provides background feedback on hover and click events, border customizability, and the ability to change the radius of each individual corner.
14  *
15  * @inherit org::kde::kirigami::ShadowedRectangle
16  */
17 Kirigami.ShadowedRectangle {
18  id: root
19 
20 //BEGIN properties
21  /**
22  * @brief This property sets whether there should be a background change on a click event.
23  *
24  * default: ``false``
25  */
26  property bool clickFeedback: false
27 
28  /**
29  * @brief This property sets whether there should be a background change on a click event.
30  *
31  * default: ``false``
32  */
33  property bool hoverFeedback: false
34 
35  /**
36  * @brief This property holds the card's normal background color.
37  *
38  * default: ``Kirigami.Theme.backgroundColor``
39  */
40  property color defaultColor: Kirigami.Theme.backgroundColor
41 
42  /**
43  * @brief This property holds the color displayed when a click event is triggered.
44  * @see DefaultCardBackground::clickFeedback
45  */
46  property color pressedColor: Kirigami.ColorUtils.tintWithAlpha(
47  defaultColor,
48  Kirigami.Theme.highlightColor, 0.3)
49 
50  /**
51  * @brief This property holds the color displayed when a hover event is triggered.
52  * @see DefaultCardBackground::hoverFeedback
53  */
54  property color hoverColor: Kirigami.ColorUtils.tintWithAlpha(
55  defaultColor,
56  Kirigami.Theme.highlightColor, 0.1)
57 
58  /**
59  * @brief This property holds the border width which is displayed at the edge of DefaultCardBackground.
60  *
61  * default: ``1``
62  */
63  property int borderWidth: 1
64 
65  /**
66  * @brief This property holds the border color which is displayed at the edge of DefaultCardBackground.
67  */
68  property color borderColor: Kirigami.ColorUtils.tintWithAlpha(
69  color, Kirigami.Theme.textColor, 0.2)
70 
71 //END properties
72 
73  color: {
74  if (root.parent.checked || (root.clickFeedback && (root.parent.down || root.parent.highlighted)))
75  return root.pressedColor
76  else if (root.hoverFeedback && root.parent.hovered)
77  return root.hoverColor
78  return root.defaultColor
79  }
80 
81  radius: Kirigami.Units.smallSpacing
82 
83  border {
84  width: root.borderWidth
85  color: root.borderColor
86  }
87  shadow {
88  size: Kirigami.Units.gridUnit
89  color: Qt.rgba(0, 0, 0, 0.05)
90  yOffset: 2
91  }
92 
93  // basic drop shadow
94  Rectangle {
95  anchors.left: parent.left
96  anchors.right: parent.right
97  anchors.top: parent.top
98  anchors.topMargin: Math.round(Kirigami.Units.smallSpacing / 4)
99 
100  radius: root.radius
101  height: root.height
102  color: Qt.darker(Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.6), 1.1)
103  visible: !root.clickFeedback || !root.parent.down
104 
105  z: -1
106  }
107 }
This file is part of the KDE documentation.
Documentation copyright © 1996-2023 The KDE developers.
Generated on Sun Jan 29 2023 04:11:03 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.