contents/ui/main.qml

0001 /*
0002     SPDX-FileCopyrightText: 2015 Sebastian Kügler <sebas@kde.org>
0003
0004     SPDX-License-Identifier: LGPL-2.0-or-later
0005 */
0006
0007 import QtQuick
0008 import QtQuick.Layouts
0009 import QtQuick.Controls as QQC2
0010 import org.kde.kirigami as Kirigami
0011
0012 Item {
0013
0014     // Initial size of the window in gridUnits
0015     width: Kirigami.Units.gridUnit * 28
0016     height: Kirigami.Units.gridUnit * 20
0017
0018     // We use a ColumnLayout to position and size the individual items
0019     ColumnLayout {
0020
0021         // Our ColumnLayout is fills the parent item with a bit of margin
0022         anchors {
0023             fill: parent
0024             margins: Kirigami.Units.gridUnit
0025         }
0026
0027         spacing: Kirigami.Units.gridUnit
0028
0029         // A title on top
0030         Kirigami.Heading {
0031             level: 1 // from 1 to 5; level 1 is the size used for titles
0032             text: i18n("Hello Plasma World!")
0033         }
0034
0035         // The central area is a rectangle
0036         Rectangle {
0037             // The id is used to reference this item from the
0038             // button's onClicked function
0039             id: colorRect
0040
0041             // It's supposed to grow in both direction
0042             Layout.fillWidth: true
0043             Layout.fillHeight: true
0044         }
0045
0046         // A button to change the color to blue or green
0047         QQC2.Button {
0048
0049             // The button is aligned to the right
0050             Layout.alignment: Qt.AlignRight
0051
0052             // The button's label, ready for translations
0053             text: i18n("Change Color")
0054
0055             onClicked: {
0056                 // Simply switch colors of the rectangle around
0057                 if (colorRect.color != "#b0c4de") {
0058                     colorRect.color = "#b0c4de"; // lightsteelblue
0059                 } else {
0060                     colorRect.color = "lightgreen";
0061                 }
0062                 // This message will end up being printed to the terminal
0063                 print("Color is now " + colorRect.color);
0064             }
0065         }
0066     }
0067
0068     // Overlay everything with a decorative, large, translucent icon
0069     Kirigami.Icon {
0070
0071         // We use an anchor layout and dpi-corrected sizing
0072         width: Kirigami.Units.iconSizes.large * 4
0073         height: width
0074         anchors {
0075             left: parent.left
0076             bottom: parent.bottom
0077         }
0078
0079         source: "akregator"
0080         opacity: 0.1
0081     }
0082 }