Kartice

Kartica služi kot pregled in vstopna točka za podrobnejše informacije in lahko nudi neposreden dostop do najpomembnejših dejanj na postavki.

Tipi Kirigami Kirigami.AbstractCard in Kirigami.Card se uporabljajo za izvajanje priljubljene komponente kartic, uporabljene na številnih mobilnih in spletnih platformah. Kartice se lahko uporabljajo za prikaz zbirke informacij ali dejanj na privlačen in razločen način.

Kirigami vam nudi tudi 3 vrste pogledov in pozicionerjev, ki vam bodo v pomoč pri predstavitvi vaših kartic z lepimi in odzivnimi postavitvami.

AbstractCard

Kirigami.AbstractCard je najenostavnejši tip kartice. To je samo pravokotnik s senco, ki lahko vsebuje katerokoli 'Postavko' v njem. Lahko ima tudi postavke, dodeljene lastnostim 'header' ali 'footer'. V tem primeru je Kirigami.Heading njegova glava in Controls.Label z lastnostjo 'wrapMode' nastavljeno na 'Text.WordWrap' je kartica 'contentItem'.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}
![Posnetek zaslona abstraktne kartice]](/docs/use/kirigami/components-card/abstract-card.png)

Kartica

Kirigami.Card deduje od Kirigami.AbstractCard in zagotavlja več funkcij iz polja. Kartica ima glavo, sestavljeno iz pasice banner in noge, sestavljenih iz predmetov Kirigami.Action skupaj z njeno glavno vsebino.

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"
        // Naslov je mogoče umestiti v pasico
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

CardsLayout

Kirigami.CardsLayout je najbolj uporabna, če kartice, ki so predstavljene, niso v opredmetene z modelom ali z modelom, ki ima vedno zelo malo predmetov. Predstavljeni so kot mreža dveh stolpcev, ki bosta ostala usredinjena, če je aplikacija res široka ali pa postaneta en sam stolpec, če ni dovolj prostora za dva stolpca, kot je npr. na zaslonu mobilnega telefona.

Postavitev kartice CardsLayout mora biti vedno vsebovana v postavitvi stolpcev ColumnLayout.

Kartica je lahko po želji usmerjena vodoravno. V tem primeru bo širša kot višja in je bolj primerna za postavitev v postavitev stolpcev ColumnLayout. Če jo morate dati v postavitev kartic CardsLayout, bo privzeto imela columnSpan 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"
            }
        }
    }
}
Posnetek zaslona postavitve kartic

CardsListView

Kirigami.CardsListView je pogled seznama, ki ga lahko uporabljate s komponentami Kirigami.AbstractCard .

Kirigami.CardsListView bo raztegnil otroške kartice na lastno širino. To komponento se zato sme uporabiti samo s karticami, ki bodo dobro videti na kateri koli vodoravni velikosti. Uporaba komponente Kirigami.CardsListView s komponento 'Kirigami.Card' odsvetujemo, razen če ima lastnost 'Qt.Horizontal' svojo lastnost 'headerOrientation'.

Izbira med uporabo tega pogleda s komponentami 'Kirigami.AbstractCard' in običajnim pogledom "ListView" s komponentami AbstractListItem / BasicListItem je zgolj estetska.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        // OPOMBA: nikoli ne postavite postavitve Layout kot vsebino v contentItem, saj bo povzročil
        // zavezujoče zanke
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    // POMEMBNO: nikoli ne nastavite spodnjega roba
                }
                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")
                }
            }
        }
    }
}
Posnetek zaslona CardsListView

CardsGridView

Uporabite Kirigami.CardsGridView za prikaz kartic v mreži.

Njegovo vedenje je enako kot Kirigami.CardsLayout in omogoča, da se kartice postavijo v enem ali dveh stolpcih, odvisno od razpoložljive širine.

CardsGridView ima omejitev, da mora imeti vsaka kartica natančno enako višino, zato mora biti "cellHeight" ročno nastavljena vrednost, za katero mora biti vsebina primerna za vsako otroško kartico.

Če je mogoče, uporabite 'Kirigami.CardsGridView' samo, če morate vzpostaviti veliko kartic. Če želite samo vnašati nekaj kartic, se raje odločite za 'Kirigami.CardsLayout' z 'Repeater'.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Model z naslednjimi vlogami: besedilo, dejanja in slika
    }
    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
            }
        ]
    }
}
Posnetek zaslona CardsGridView