src/formcard/FormCard.qml

0001 /*
0002  * Copyright 2022 Devin Lin <devin@kde.org>
0003  * SPDX-License-Identifier: LGPL-2.0-or-later
0004  */
0005
0006 import QtQuick 2.15
0007 import QtQuick.Controls 2.15
0008 import QtQuick.Layouts 1.15
0009
0010 import org.kde.kirigami 2.19 as Kirigami
0011
0012 import "private" as Private
0013
0014 /**
0015  * @brief A single card that follows a form style.
0016  *
0017  * This is the entrypoint component for MobileForm.
0018  *
0019  * A FormCard consists of a container that can be used to create your
0020  * own Settings pages. It has a different color than the background.
0021  *
0022  * Each FormCard can contain one or more Form delegates in its ::contentItem.
0023  * To add more than one Form delegate to a FormCard, use a
0024  * QtQuick.Layouts.ColumnLayout to group them.
0025  *
0026  * Multiple FormCards can be grouped with a QtQuick.Layouts.ColumnLayout to
0027  * represent different Settings sections.
0028  *
0029  * Each section is expected to contain a FormCardHeader as the first
0030  * delegate, which serves the role of a section title.
0031  *
0032  * The height of the FormCard matches the implicit height of the
0033  * ::contentItem and does not need to be set, while the width is expected
0034  * to be given by the parent, for example, via a Layout.fillWidth.
0035  *
0036  * @since KirigamiAddons 0.11.0
0037  *
0038  * @inherit QtQuick.Item
0039  */
0040 Item {
0041     id: root
0042
0043     /**
0044      * @brief The delegates inside the Form card.
0045      *
0046      * This is where you should add new Form delegates.
0047      */
0048     default property alias delegates: internalColumn.data
0049
0050     /**
0051      * @brief The maximum width of the card.
0052      *
0053      * This can be set to a specific value to force its delegates to wrap
0054      * instead of using the entire width of the parent.
0055      *
0056      * default: `Kirigami.Units.gridUnit * 30`
0057      *
0058      * @see cardWidthRestricted
0059      */
0060     property real maximumWidth: Kirigami.Units.gridUnit * 30
0061
0062     /**
0063      * @brief The padding used around the content edges.
0064      *
0065      * default: `0`
0066      */
0067     property real padding: 0
0068     property real verticalPadding: padding
0069     property real horizontalPadding: padding
0070     property real topPadding: verticalPadding
0071     property real bottomPadding: verticalPadding
0072     property real leftPadding: horizontalPadding
0073     property real rightPadding: horizontalPadding
0074
0075     /**
0076      * Whether the card's width is being restricted.
0077      */
0078     readonly property bool cardWidthRestricted: root.width > root.maximumWidth
0079
0080     Kirigami.Theme.colorSet: Kirigami.Theme.View
0081     Kirigami.Theme.inherit: false
0082
0083     Layout.fillWidth: true
0084
0085     implicitHeight: topPadding + bottomPadding + internalColumn.implicitHeight + rectangle.borderWidth * 2
0086
0087     Rectangle {
0088         id: rectangle
0089         readonly property real borderWidth: 1
0090
0091         // only have card radius if it isn't filling the entire width
0092         radius: root.cardWidthRestricted ? Kirigami.Units.smallSpacing : 0
0093         color: Kirigami.Theme.backgroundColor
0094
0095         anchors {
0096             top: parent.top
0097             bottom: parent.bottom
0098             left: parent.left
0099             right: parent.right
0100
0101             leftMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : -1
0102             rightMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : -1
0103         }
0104
0105         border {
0106             color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0107             width: borderWidth
0108         }
0109
0110         ColumnLayout {
0111             id: internalColumn
0112
0113             spacing: 0
0114
0115             // add 1 to margins to account for the border (so content doesn't overlap it)
0116             anchors {
0117                 fill: parent
0118                 leftMargin: root.leftPadding + rectangle.borderWidth
0119                 rightMargin: root.rightPadding + rectangle.borderWidth
0120                 topMargin: root.topPadding + rectangle.borderWidth
0121                 bottomMargin: root.bottomPadding + rectangle.borderWidth
0122             }
0123         }
0124     }
0125 }