Differential D11316 Diff 29626 examples/gallerydata/contents/ui/gallery/CardsLayoutGallery.qml

Changeset View

Standalone View

View Options

examples/gallerydata/contents/ui/gallery/CardsLayoutGallery.qml

  • This file was added.
1​/*
2​ * Copyright 2018 Marco Martin <mart@kde.org>
3​ *
4​ * This program is free software; you can redistribute it and/or modify
5​ * it under the terms of the GNU Library General Public License as
6​ * published by the Free Software Foundation; either version 2 or
7​ * (at your option) any later version.
8​ *
9​ * This program is distributed in the hope that it will be useful,
10​ * but WITHOUT ANY WARRANTY; without even the implied warranty of
11​ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12​ * GNU Library General Public License for more details
13​ *
14​ * You should have received a copy of the GNU Library General Public
15​ * License along with this program; if not, write to the
16​ * Free Software Foundation, Inc.,
17​ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
18​ */
19​
20​import QtQuick 2.6
21​import QtQuick.Controls 2.0 as Controls
22​import QtQuick.Layouts 1.2
23​import org.kde.kirigami 2.4 as Kirigami
24​
25​Kirigami.ScrollablePage {
26​ id: page
27​
28​ title: "Cards Layout"
29​
30​ actions.main: Kirigami.Action {
31​ iconName: "documentinfo"
32​ text: "Info"
33​ checkable: true
34​ onCheckedChanged: sheet.sheetOpen = checked;
35​ shortcut: "Alt+I"
36​ }
37​
38​ Kirigami.OverlaySheet {
39​ id: sheet
40​ onSheetOpenChanged: page.actions.main.checked = sheetOpen
41​ header: RowLayout {
42​ Kirigami.Heading {
43​ Layout.fillWidth: true
44​ text: "CardsLayout"
45​ }
46​ Controls.ToolButton {
47​ text: "HIG..."
48​ enabled: false
49​ onClicked: Qt.openUrlExternally("")
50​ }
51​ Controls.ToolButton {
52​ text: "Source code..."
53​ onClicked: Qt.openUrlExternally("https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/CardsLayoutGallery.qml
54​ ")
55​ }
56​ }
57​
58​ Controls.Label {
59​ property int implicitWidth: Kirigami.Units.gridUnit * 25
60​ wrapMode: Text.WordWrap
61​ text: "The Kirigami types AbstractCard and Card are used to implement the popular Card pattern used on many mobile and web platforms that is used to display a collection of information or actions.\n Besides the Card components, Kirigami offers also 3 kinds of views and positioners to help to present cards with beautiful and responsive layouts.\n\nIn this page, CardsLayout is presented, which should be used when the cards are not instantiated by a model or by a model which has always very few items (In the case of a big model CardsListView or CardsGridview should be used instead). They are presented as a grid of two columns which will remain centered if the application is really wide, or become a single column if there is not enough space for two columns, such as a mobile phone screen.\nA CardsLayout should always be contained within a ColumnLayout."
62​ }
63​ }
64​
65​ ColumnLayout {
66​ Kirigami.CardsLayout {
67​ id: layout
68​ Kirigami.AbstractCard {
69​ Layout.fillHeight: true
70​ header: Kirigami.Heading {
71​ text: "AbstractCard"
72​ level: 2
73​ }
74​ contentItem: Controls.Label {
75​ wrapMode: Text.WordWrap
76​ text: "An AbstractCard is the simplest form of card. It's just a rectangle with a shadow, which can contain any Item in it. It can also have items assigned to the Header or Footer properties. In this case a Kirigami.Heading is its header and a Label with WordWrap is the contentItem."
77​ }
78​ }
79​
progwolffUnsubmitted
Done

Its just a -> It's just a
. in -> . In

progwolff: Its just a -> It's just a . in -> . In
80​ Kirigami.AbstractCard {
81​ showClickFeedback: true
82​ contentItem: Controls.Label {
83​ wrapMode: Text.WordWrap
84​ text: "This is an AbstractCard with a Label with WordWrap in it and nothing else, it's the simplest form Cards can be found in.\nAn AbstractCard can be clicked itself, with the usual onClicked signal handler and the showClickFeedback property can be used if the click should show any kind of visual feedback. It is recommended to set it to true if you plan to make the card reactive on any kind of click."
davidedmundsonUnsubmitted
Done

Why is it the responsiblility of the user of a CardLayout to set Layout.fillWidth: true on every item yet CardLayout goes to great lengths to auto-inject Layout.fillHeight on every item? Surely one of the other?

(also it seems to visually completely explode if you don't have this set, which sounds like the sign of a bug elsewhere)

davidedmundson: Why is it the responsiblility of the user of a CardLayout to set Layout.fillWidth: true on…
85​ }
86​ onClicked: showPassiveNotification("Card clicked")
87​ }
88​
progwolffUnsubmitted
Done

recomended -> recommended

progwolff: recomended -> recommended
89​ Kirigami.Card {
90​ actions: [
91​ Kirigami.Action {
92​ text: "Action1"
93​ icon.name: "add-placemark"
94​ },
95​ Kirigami.Action {
96​ text: "Action2"
97​ icon.name: "address-book-new-symbolic"
98​ }
99​ ]
100​ banner {
101​ imageSource: "../banner.jpg"
102​ title: "Card"
103​ }
104​ contentItem: Controls.Label {
105​ wrapMode: Text.WordWrap
106​ text: "This is an instance of the Card type: it can optionally have an image, a title and an icon assigned to its banner group property, one or all of the properties together. A Card can also have Actions that will appear in the footer."
107​ }
108​ }
109​
110​
111​ Kirigami.Card {
112​ actions: [
113​ Kirigami.Action {
114​ text: "Action1"
115​ icon.name: "add-placemark"
116​ },
117​ Kirigami.Action {
118​ text: "Action2"
119​ icon.name: "address-book-new-symbolic"
120​ },
121​ Kirigami.Action {
122​ text: "Action3"
123​ icon.name: "add-placemark"
124​ },
125​ Kirigami.Action {
126​ text: "Action4"
127​ icon.name: "address-book-new-symbolic"
128​ },
129​ Kirigami.Action {
130​ text: "Action5"
131​ icon.name: "add-placemark"
132​ },
133​ Kirigami.Action {
134​ text: "Action6"
135​ icon.name: "address-book-new-symbolic"
136​ }
137​ ]
138​ banner {
139​ imageSource: "../banner.jpg"
140​ title: "Title Alignment"
141​ titleAlignment: Qt.AlignLeft | Qt.AlignBottom
142​ }
143​ contentItem: Controls.Label {
144​ wrapMode: Text.WordWrap
145​ text: "The title can be aligned to all corners or centered with a combination of Qt.Alignment flags.\n When there are too many actions, they go in an overflow menu."
146​ }
147​ }
148​
149​ Kirigami.Card {
150​ actions: [
151​ Kirigami.Action {
152​ text: "Action1"
153​ icon.name: "add-placemark"
154​ },
155​ Kirigami.Action {
156​ text: "Action2"
157​ icon.name: "address-book-new-symbolic"
158​ },
159​ Kirigami.Action {
160​ text: "Action3"
161​ icon.name: "add-placemark"
162​ }
163​ ]
164​ banner {
165​ iconSource: "applications-graphics"
166​ title: "Title only"
167​ }
168​ contentItem: Controls.Label {
169​ wrapMode: Text.WordWrap
170​ text: "The Banner can contain only the title and/or an icon, even if there is no banner image."
171​ }
172​ }
173​
174​ Kirigami.Card {
175​ banner.imageSource: "../banner.jpg"
176​
177​ header: Rectangle {
178​ color: Qt.rgba(0,0,0,0.3)
179​ implicitWidth: headerLayout.implicitWidth
180​ implicitHeight: headerLayout.implicitHeight - avatarIcon.height/2
181​ ColumnLayout {
182​ id: headerLayout
183​ anchors {
184​ left: parent.left
185​ right: parent.right
186​ }
187​ Controls.Label {
188​ Layout.fillWidth: true
189​ padding: Kirigami.Units.largeSpacing
190​
191​ color: "white"
192​ wrapMode: Text.WordWrap
193​ text: "It's possible to have custom contents overlapping the image, for cases where a more personalised design is needed."
194​ }
195​ Rectangle {
196​ id: avatarIcon
197​ color: "steelblue"
198​ radius: width
199​ Layout.alignment: Qt.AlignHCenter
200​ Layout.preferredWidth: Kirigami.Units.iconSizes.huge
201​ Layout.preferredHeight: Kirigami.Units.iconSizes.huge
202​ }
203​ }
204​ }
205​ contentItem: Controls.Label {
206​ wrapMode: Text.WordWrap
207​ topPadding: avatarIcon.height/2
208​ text: "It's possible to customize the look and feel for Cards too, if the no padding behavior for headers is needed. This is usually discouraged in order to have greater consistency, but in some cases the design requires a more fancy layout, as shown in this example of a Card. If a custom header is used, the title and icon in the banner property shouldn't be used. If a custom footer is used (which is discouraged), actions shouldn't be used."
209​ }
210​ footer: RowLayout {
211​ Controls.Label {
212​ Layout.fillWidth: true
213​ text: "Custom footer"
214​ }
215​ Controls.Button {
216​ text: "Ok"
progwolffUnsubmitted
Done

. if -> . If

progwolff: . if -> . If
217​ }
218​ }
219​ }
220​
221​ Kirigami.Card {
222​ headerOrientation: Qt.Horizontal
223​ actions: [
224​ Kirigami.Action {
225​ text: "Action1"
226​ icon.name: "add-placemark"
227​ },
228​ Kirigami.Action {
229​ text: "Action2"
230​ icon.name: "address-book-new-symbolic"
231​ }
232​ ]
233​ banner {
234​ imageSource: "../banner.jpg"
235​ title: "Title"
236​ }
237​ contentItem: Controls.Label {
238​ wrapMode: Text.WordWrap
239​ text: "A card can optionally have horizontal orientation.\n In this case will be wider than tall, so is fit to be used also in a ColumnLayout.\nIf you need to put it in a CardsLayout, it will have by default a columnSpan of 2 (which can be overridden)."
240​ }
241​ }
242​ }
243​ }
244​}
progwolffUnsubmitted
Done

.\n in -> .\n In

progwolff: .\n in -> .\n In