ui/components/FloatingActionButton.qml

0001 // SPDX-FileCopyrightText: 2021-2022 Devin Lin <espidev@gmail.com>
0002 // SPDX-License-Identifier: GPL-3.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Controls as Controls
0006 import QtQuick.Templates as T
0007 import QtQuick.Layouts
0008
0009 import org.kde.kirigami as Kirigami
0010
0011 /**
0012  * @brief Floating button that can be used on pages to trigger actions.
0013  *
0014  * It is automatically anchored to be horizontally centered in the parent component, and towards the bottom.
0015  *
0016  * These anchors can be overridden.
0017  *
0018  * Example usage:
0019  * @code{.qml}
0020  * import QtQuick 2.15
0021  * import QtQuick.Layouts 1.15
0022  * import org.kde.kirigami 2.21 as Kirigami
0023  *
0024  * Kirigami.ScrollablePage {
0025  *     title: i18n("Page with ListView")
0026  *
0027  *     ListView {
0028  *         model: 50
0029  *         delegate: Kirigami.BasicListItem {
0030  *             text: modelData
0031  *         }
0032  *
0033  *         Kirigami.FloatingActionButton {
0034  *             icon.name: "list-add"
0035  *             onClicked: {
0036  *                 // behaviour when clicked
0037  *             }
0038  *         }
0039  *     }
0040  * }
0041  * @endcode
0042  */
0043 T.RoundButton {
0044     id: root
0045     width: implicitWidth
0046     height: implicitHeight
0047     implicitWidth: Kirigami.Units.gridUnit * 3
0048     implicitHeight: Kirigami.Units.gridUnit * 3
0049
0050     anchors.horizontalCenter: parent.horizontalCenter
0051     anchors.bottom: parent.bottom
0052     anchors.bottomMargin: Kirigami.Units.largeSpacing
0053
0054     background: Kirigami.ShadowedRectangle {
0055         anchors.fill: parent
0056         radius: root.radius
0057         color: root.pressed ? Qt.darker(Kirigami.Theme.highlightColor, 1.2) : Kirigami.Theme.highlightColor
0058         renderType: Kirigami.ShadowedRectangle.HighQuality
0059
0060         property color shadowColor: Qt.darker(Kirigami.Theme.backgroundColor, 1.5)
0061         shadow.color: Qt.rgba(shadowColor.r, shadowColor.g, shadowColor.b, 0.5)
0062         shadow.size: 7
0063         shadow.yOffset: 2
0064     }
0065
0066     contentItem: Item {
0067         Kirigami.Icon {
0068             anchors.centerIn: parent
0069             source: root.icon.name
0070             Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0071             Kirigami.Theme.inherit: false
0072             isMask: true
0073             implicitWidth: Kirigami.Units.iconSizes.smallMedium
0074             implicitHeight: Kirigami.Units.iconSizes.smallMedium
0075         }
0076     }
0077 }