Kartoj

Karto funkcias kiel superrigardo kaj enirpunkto por pli detalaj informoj kaj povas proponi rektan aliron al la plej gravaj agoj de ero.

La Kirigami-tipoj AbstractCard kaj Karto estas uzataj por efektivigi la popularan kartkomponenton uzatan en multaj moveblaj kaj retplatformoj. Kartoj povas esti uzataj por montri kolekton de informoj aŭ agoj laŭ alloga kaj karakteriza maniero.

Kirigami ankaŭ ofertas 3 specojn de vidoj kaj [poziciantoj](https://doc.qt.io/qt-6 /qtquick-positioning-layouts.html) por helpi vin prezenti viajn kartojn kun belaj kaj respondemaj aranĝoj.

Abstrakta Karto

A Kirigami.AbstractCard is the simplest type of card. It's just a rectangle with a shadow, which can contain any Item in it. It can also have Items assigned to its header or footer properties. In this case a Kirigami.Heading is its header and a Controls.Label is the card's contentItem.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}
Ekrankopio de Abstrakta Karto, simpla rektangula butono kun maldekstre vicigita teksto

Karto

Kirigami.Karto heredas de AbstractCard kaj disponigas pliajn funkciojn el la skatolo. Kartoj heredas la saman header kaj footer de Abstrakta Karto, sed vi estas kuraĝigitaj uzi standardo kaj aro de Kirigami.Action en la grupo agoj anstataŭe.

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"
        // La titolo povas esti poziciigita en la standardon
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}
![Ekrankopio de plenrajta Karto kun standarda fono malantaŭ ĝia titolo, blanka fono malantaŭ ĝia teksto, kaj du agoj kun piktogramoj kaj hamburgera menuo malsupre](/docs/getting-started/kirigami/components-card/ karto1.png)

CardsLayout

Kirigami.CardsLayout estas plej utila kiam la prezentitaj kartoj estas aŭ ne instancigitaj de modelo aŭ estas instancigitaj de modelo kiu ĉiam havas tre malmultajn erojn. Ili estas prezentitaj kiel krado de du kolumnoj, kiuj restos centritaj se la aplikaĵo estas vere larĝa, aŭ fariĝos ununura kolumno se ne estas sufiĉe da spaco por du kolumnoj, kiel ekrano de poŝtelefono.

Karto povas laŭvole esti orientita horizontale. En ĉi tiu kazo ĝi estos pli larĝa ol alta, kaj pli taŭgas por esti metita en ColumnLayout. Se vi devas meti ĝin en CardsLayout , ĝi havos maximumColumns de 2 defaŭlte.

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"
            }
        }
    }
}
Ekrankopio de CardsLayout montranta du kartojn flank-al-flanke en portreta orientiĝo supre de karto en pejzaĝa orientiĝo, ĉiuj kun malsamaj komponentoj uzataj

KartojListView

Kirigami.CardsListView estas listvido uzebla kun AbstractCard komponantoj.

CardsListView etendos infanajn kartojn al sia propra larĝo. Ĉi tiu komponanto devus esti uzata nur kun kartoj, kiuj aspektos bone je ajna horizontala grandeco. Uzo de Karto komponanto ene de ĝi estas malinstigita, krom se ĝi havas Qt.Horizontal kiel sia [headerOrientation](docs:kirigami2;ŝablonoj:: AbstractCard::headerOrientation) proprieto.

La elekto inter uzi ĉi tiun vidon kun AbstractCard komponantoj aŭ konvencia ListView kun AbstractListItem /[BasicListItem] :kirigami2;BasicListItem) komponantoj estas nur estetika.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        //NOTO: neniam metu Aranĝon kiel enhavItem ĉar ĝi kaŭzos ligajn buklojn
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    //GRAVA: neniam metu la malsupran marĝenon
                }
                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")
                }
            }
        }
    }
}

Ekrankopio de CardsListView, kiu estas simpla vertikala listo de kartoj en pejzaĝa reĝimo

CardsGridView

Uzu Kirigami.CardsGridView por montri kartojn en krado.

Ĝia konduto estas sama kiel CardsLayout , kaj ĝi permesas kartojn esti enmetitaj en unu aŭ du kolumnoj depende de la disponebla larĝo.

CardsGridView havas la limigon, ke ĉiu karto devas havi la saman precizan altecon, do [cellHeight](https://doc.qt.io/qt-6/qml-qtquick-gridview.html# cellHeight-prop) devas esti mane agordita al valoro por kiu la enhavo devas konveni por ĉiu infankarto.

Se eble uzu CardsGridView nur kiam vi bezonas krei multajn kartojn. Se vi nur instanciigos kelkajn kartojn, elektu CardsLayout kun Ripetilo anstataŭe.

Kirigami.CardsGridView {
    id: view
    model: ListModel {
        id: mainModel
        // Modelo kun la sekvaj roloj: teksto, agoj kaj bildo
    }
    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
            }
        ]
    }
}

![Ekrankopio de Card GridView kie ĉiu karto okupas la saman spacon en krado](/docs/getting-started/kirigami/components-card/cards gridview.png)