Targetes (Card)

Una targeta serveix com a descripció general i un punt d’entrada per a obtenir informació més detallada, i pot oferir accés directe a les accions més importants d’un element.

Els tipus Kirigami.AbstractCard i Kirigami.Card de Kirigami s’utilitzen per a implementar el popular component de targeta utilitzat en moltes plataformes mòbils i web. Les targetes es poden utilitzar per a mostrar una col·lecció amb informació o accions d’una manera atractiva i distintiva.

El Kirigami també ofereix 3 tipus de vistes i posicionadors per a ajudar-vos a presentar les vostres targetes amb disposicions belles i sensibles.

AbstractCard

Una Kirigami.AbstractCard és el tipus de targeta més senzilla. Només és un rectangle amb una ombra, el qual podrà contenir qualsevol element. També podrà tenir elements assignats a les seves propietats header o footer. En aquest cas, una Kirigami.Heading és la seva capçalera i un [Controls.Label]docs:qtquickcontrols;QtQuick.Controls.Label) amb wrapMode establert a Text.WordWrap és el contentItem de la targeta.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}
Captura de pantalla d’una AbstractCard

Targeta (Card)

Una Kirigami.Card hereta des de Kirigami.AbstractCard i proporciona més característiques a punt d’emprar. Una targeta té una capçalera composta per un bàner i un peu de pàgina compost per objectes Kirigami.Action juntament amb el seu contingut principal.

Kirigami.Card {
    actions: [
        Kirigami.Action {
            text: qsTr("Action1")
            icon.name: "add-placemark"
        },
        Kirigami.Action {
            text: qsTr("Action2")
            icon.name: "address-book-new-symbolic"
        },
        // ...
    ]
    banner {
        source: "../banner.jpg"
        title: "Title Alignment"
        // El títol es pot col·locar en el bàner
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

CardsLayout

Una Kirigami.CardsLayout és més útil quan les targetes que es presenten no són instanciades per un model o per un model que sempre té molt pocs elements. Es presentaran com una quadrícula de dues columnes que romandran centrades si l’aplicació és realment ampla, o es convertiran en una sola columna si no hi ha prou espai per a dues columnes, com en la pantalla d’un telèfon mòbil.

Una «CardsLayout» sempre haurà d’estar continguda dins d’una «ColumnLayout».

De manera opcional, una targeta es pot orientar horitzontalment. En aquest cas, serà més ampla que alta i és més adequada per a col·locar-se en una ColumnLayout. Si heu de posar-la en una CardsLayout, de manera predeterminada tindreu un columnSpan de 2.

ColumnLayout {
    Kirigami.CardsLayout {
        Kirigami.Card {
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text2"
            }
        }
        Kirigami.AbstractCard { 
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text"
            }
        }
        Kirigami.Card {
            headerOrientation: Qt.Horizontal
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text2"
            }
        }
    }
}
Captura de pantalla d’una CardsLayout

CardsListView

Una Kirigami.CardsListView és una vista de llista que es pot utilitzar amb els components de Kirigami.AbstractCard .

Una Kirigami.CardsListView estendrà les targetes filles a la seva pròpia amplada. Per tant, aquest component només s’ha d’utilitzar amb les targetes que es vegin bé en qualsevol mida horitzontal. Es desaconsella l’ús del component Kirigami.Card, llevat que tingueu Qt.Horizontal com la seva propietat headerOrientation.

L’elecció entre utilitzar aquesta vista amb components Kirigami.AbstractCard o un ListView convencional amb components AbstractListItem / BasicListItem és purament estètic.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        // NOTA: No poseu mai una disposició com a contentItem, ja que provocarà bucles de vincle
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    // IMPORTANT: no posar mai el marge inferior
                }
                rowSpacing: Kirigami.Units.largeSpacing
                columnSpacing: Kirigami.Units.largeSpacing
                columns: width > Kirigami.Units.gridUnit * 20 ? 4 : 2
                Kirigami.Icon {
                    source: "applications-graphics"
                    Layout.fillHeight: true
                    Layout.maximumHeight: Kirigami.Units.iconSizes.huge
                    Layout.preferredWidth: height
                }
                Kirigami.Heading {
                    level: 2
                    text: qsTr("Product ")+ modelData
                }
                Controls.Button {
                    Layout.alignment: Qt.AlignRight
                    Layout.columnSpan: 2 
                    text: qsTr("Install")
                }
            }
        }
    }
}
Captura de pantalla d’una CardsGridView

CardsGridView

Utilitzeu una Kirigami.CardsGridView per a mostrar les targetes en una quadrícula.

El seu comportament és el mateix que una Kirigami.CardsLayout, i permet col·locar les targetes en una o dues columnes depenent de l’amplada disponible.

Una CardsGridView té la limitació que totes les targetes hauran de tenir la mateixa alçada exacta, de manera que cellHeight s’haurà d’establir manualment a un valor per al qual el contingut haurà de cabre per a cada targeta filla.

Si és possible, utilitzeu Kirigami.CardsGridView només quan necessiteu fer una instància de moltes targetes. Si només creeu una instància d’unes quantes targetes, en el seu lloc opteu per una Kirigami.CardsLayout amb un Repeater.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Model amb els rols següents: text, accions i imatge
    }
    delegate:Kirigami.Card {
        id: card
        banner {
            title: model.title
            source: model.image
        }
        contentItem: Controls.Label {
            wrapMode: Text.WordWrap
            text: model.text
        }
        actions: [
            Kirigami.Action {
                text: model.actions.get(0).text
                icon.name: model.actions.get(0).icon
            },
            Kirigami.Action {
                text: model.actions.get(1).text
                icon.name: model.actions.get(1).icon
            }
        ]
    }
}
Captura de pantalla d’una CardsGridView