Differential D11316 Diff 29585 examples/gallerydata/contents/ui/gallery/CardsListViewGallery.qml

Changeset View

Standalone View

examples/gallerydata/contents/ui/gallery/CardsListViewGallery.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: "List view of simple cards"
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: "CardsGridView"
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/CardsListViewGallery.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, CardsListView is used to do a list view of AbstractCard subclasses with a custom layout inside.\n CardsListView should be used only with cards which can look good at any horizontal size, so it is recommended to use directly AbstractCard with an appropriate layout inside, because they are stretching for the whole list width.\nTherefore is discouraged to use it with the Card type, unless it has Horizontal as headerOrientation.\n The choice between using this view with AbstractCard or a normal ListView with AbstractListItem/BasicListItem is purely a choice based on aestetics alone."
62		}
	progwolffUnsubmitted Done so It is -> so it is progwolff: so It is -> so it is
63		}
64
65		Kirigami.CardsListView {
66		model: 100
67
68		delegate: Kirigami.AbstractCard {
69
70		//NOTE: never put a Layout as contentItem as it will cause binding loops
71		//SEE: https://bugreports.qt.io/browse/QTBUG-66826
72		contentItem: Item {
73		implicitWidth: delegateLayout.implicitWidth
74		implicitHeight: delegateLayout.implicitHeight
75		GridLayout {
76		id: delegateLayout
77		anchors {
78		left: parent.left
79		top: parent.top
80		right: parent.right
81		//IMPORTANT: never put the bottom margin
82		}
83		rowSpacing: Kirigami.Units.largeSpacing
84		columnSpacing: Kirigami.Units.largeSpacing
85		columns: width > Kirigami.Units.gridUnit * 20 ? 4 : 2
86		Kirigami.Icon {
87		source: "applications-graphics"
88		Layout.fillHeight: true
89		Layout.maximumHeight: Kirigami.Units.iconSizes.huge
90		Layout.preferredWidth: height
91		}
92		ColumnLayout {
93		Kirigami.Heading {
94		level: 2
95		text: "Product "+ modelData
96		}
97		Kirigami.Separator {
98		Layout.fillWidth: true
99		}
100		Controls.Label {
101		Layout.fillWidth: true
102		wrapMode: Text.WordWrap
103		text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus id augue euismod accumsan."
104		}
105		}
106		Controls.Button {
107		Layout.alignment: Qt.AlignRight\|Qt.AlignVCenter
108		Layout.columnSpan: 2
109		text: "Install"
110		onClicked: showPassiveNotification("Install for Product " + modelData + " clicked");
111		}
112		}
113		}
114		}
115		}
116		}