Changeset View
Changeset View
Standalone View
Standalone View
src/data/contents/ui/gallery/CardsGridViewGallery.qml
| Context not available. | |||||
| 22 | import QtQuick.Layouts 1.2 | 22 | import QtQuick.Layouts 1.2 | ||
|---|---|---|---|---|---|
| 23 | import org.kde.kirigami 2.4 as Kirigami | 23 | import org.kde.kirigami 2.4 as Kirigami | ||
| 24 | 24 | | |||
| 25 | import "components" | ||||
| 26 | | ||||
| 25 | Kirigami.ScrollablePage { | 27 | Kirigami.ScrollablePage { | ||
| 26 | id: page | 28 | id: page | ||
| 27 | 29 | | |||
| Context not available. | |||||
| 35 | shortcut: "Alt+I" | 37 | shortcut: "Alt+I" | ||
| 36 | } | 38 | } | ||
| 37 | 39 | | |||
| 38 | Kirigami.OverlaySheet { | 40 | //Close the drawer with the back button | ||
| 39 | id: sheet | 41 | onBackRequested: { | ||
| 40 | onSheetOpenChanged: page.actions.main.checked = sheetOpen | 42 | if (sheet.sheetOpen) { | ||
| 41 | header: RowLayout { | 43 | event.accepted = true; | ||
| 42 | Kirigami.Heading { | 44 | sheet.close(); | ||
| 43 | Layout.fillWidth: true | | |||
| 44 | text: qsTr("Cards Grid View") | | |||
| 45 | } | | |||
| 46 | Controls.ToolButton { | | |||
| 47 | text: qsTr("HIG...") | | |||
| 48 | enabled: false | | |||
| 49 | onClicked: Qt.openUrlExternally("") | | |||
| 50 | } | | |||
| 51 | Controls.ToolButton { | | |||
| 52 | text: qsTr("Source code...") | | |||
| 53 | onClicked: Qt.openUrlExternally("https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/CardsGridViewGallery.qml") | | |||
| 54 | } | | |||
| 55 | } | 45 | } | ||
| 46 | } | ||||
| 56 | 47 | | |||
| 57 | Controls.Label { | 48 | InfoSheet { | ||
| 58 | property int implicitWidth: Kirigami.Units.gridUnit * 25 | 49 | id: sheet | ||
| 59 | wrapMode: Text.WordWrap | 50 | | ||
| 60 | text: qsTr("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, CardsGridView shows an example on how to put cards in a grid view, generated by a Qt model.\nThe behavior is same as CardsLayout, and it allows cards to be put in one or two columns depending from the available width.\nCardsGridView has the limitation that every Card must have the same exact height, so cellHeight must be manually set to a value in which the content fits for every item.\nIf possible use cards only when you don't need to instantiate that many and use CardsLayout instead.") | 51 | page: page | ||
| 61 | } | 52 | component: "CardsGridViewGallery" | ||
| 62 | } | 53 | } | ||
| 63 | 54 | | |||
| 64 | Component.onCompleted: { | 55 | Component.onCompleted: { | ||
| Context not available. | |||||