Kirigami-addons

FloatingButton.qml
1// SPDX-FileCopyrightText: 2023 Mathis BrĂ¼chert <mbb@kaidan.im>
2// SPDX-FileCopyrightText: 2023 Carl Schwan <carl@carlschwan.eu>
3// SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
4//
5// SPDX-License-Identifier: LGPL-2.0-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
6
7import QtQuick 2.15
8import QtQuick.Layouts 1.15
9import QtQuick.Controls 2.15 as QQC2
10import QtQuick.Templates 2.15 as T
11import org.kde.kirigami 2.20 as Kirigami
12
13/**
14 * This component is a button that can be displayed at the bottom of a page.
15 *
16 * @code{.qml}
17 * import QtQuick 2.15
18 * import QtQuick.Controls 2.15 as QQC2
19 * import org.kde.kirigami 2.20 as Kirigami
20 * import org.kde.kirigamiaddons.components 1.0 as KirigamiComponents
21 *
22 * Kirigami.ScrollablePage {
23 * ListView {
24 * model: []
25 * delegate: QQC2.ItemDelegate {}
26 *
27 * KirigamiComponents.FloatingButton {
28 * anchors {
29 * right: parent.right
30 * bottom: parent.bottom
31 * }
32 * margins: Kirigami.Units.largeSpacing
33 *
34 * action: Kirigami.Action {
35 * text: "Add new item"
36 * icon.name: "list-add"
37 * }
38 * }
39 * }
40 * }
41 * @endcode
42 *
43 * @since Kirigami Addons 0.11
44 */
45T.RoundButton {
46 id: controlRoot
47
48 Kirigami.Theme.colorSet: Kirigami.Theme.Button
49 Kirigami.Theme.inherit: false
50
51 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
52 implicitContentWidth + leftPadding + rightPadding)
53 implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
54 implicitContentHeight + topPadding + bottomPadding)
55
56 readonly property size __effectiveIconSize: Qt.size(
57 icon.height > 0 ? icon.height : Kirigami.Units.iconSizes.medium,
58 icon.width > 0 ? icon.width : Kirigami.Units.iconSizes.medium,
59 )
60
61 // Property is needed to prevent binding loops on insets
62 readonly property real __padding: radius === Infinity
63 ? Math.round(Math.max(__effectiveIconSize.width, __effectiveIconSize.height) * (Math.sqrt(2) - 1))
64 : Kirigami.Settings.hasTransientTouchInput ? (Kirigami.Units.largeSpacing * 2) : Kirigami.Units.largeSpacing
65
66 // Extra clickable area that adjusts both paddings and insets.
67 property real margins: 0
68 property real topMargin: margins
69 property real leftMargin: margins
70 property real rightMargin: margins
71 property real bottomMargin: margins
72
73 // Fit icon into a square bounded by a circle bounded by button
74 padding: __padding
75
76 topPadding: padding + topMargin
77 leftPadding: padding + leftMargin
78 rightPadding: padding + rightMargin
79 bottomPadding: padding + bottomMargin
80
81 // If user overrides individual padding value, we should adjust background. By default all insets will be 0.
82 topInset: topMargin
83 leftInset: leftMargin
84 rightInset: rightMargin
85 bottomInset: bottomMargin
86
87 // Set to Infinity to get extra padding for round button style.
88 radius: Kirigami.Units.cornerRadius
89
90 // Text is not supported anyway
91 spacing: 0
92
93 hoverEnabled: !Kirigami.Settings.hasTransientTouchInput
94
95 contentItem: Item {
96 implicitWidth: controlRoot.__effectiveIconSize.width
97 implicitHeight: controlRoot.__effectiveIconSize.height
98
99 Kirigami.Icon {
100 anchors.fill: parent
101 color: controlRoot.icon.color
102 source: controlRoot.icon.name !== "" ? controlRoot.icon.name : controlRoot.icon.source
103 }
104 }
105
106 background: Item {
107 Kirigami.ShadowedRectangle {
108 anchors.centerIn: parent
109 width: Math.min(parent.width, parent.height)
110 height: width
111 radius: controlRoot.radius
112
113 shadow {
114 size: 10
115 xOffset: 0
116 yOffset: 2
117 color: Qt.rgba(0, 0, 0, 0.2)
118 }
119
120 border {
121 width: 1
122 color: if (controlRoot.down || controlRoot.visualFocus) {
123 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.4)
124 } else if (controlRoot.enabled && controlRoot.hovered) {
125 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
126 } else {
127 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
128 }
129 }
130
131 color: if (controlRoot.down || controlRoot.visualFocus) {
132 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.6)
133 } else if (controlRoot.enabled && controlRoot.hovered) {
134 Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.hoverColor, Kirigami.Theme.backgroundColor, 0.8)
135 } else {
136 Kirigami.Theme.backgroundColor
137 }
138
139 Behavior on border.color {
140 ColorAnimation {
141 duration: Kirigami.Units.veryShortDuration
142 }
143 }
144
145 Behavior on color {
146 ColorAnimation {
147 duration: Kirigami.Units.veryShortDuration
148 }
149 }
150 }
151 }
152}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Dec 6 2024 12:05:53 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.