Karta
Typy Kirigami AbstractCard a Card sa používajú na implementáciu populárneho komponentu karty používaného na mnohých mobilných a webových platformách. Karty sa dajú použiť na zobrazenie kolekcie informácií alebo akcií atraktívnym a výrazným spôsobom.
Kirigami tiež ponúka 3 druhy zobrazení a pozicionérov, ktoré vám pomôžu prezentovať vaše karty s krásnymi a responzívnymi rozloženiami.
AbstractCard
Kirigami.AbstractCard je najjednoduchší typ karty. Je to len obdĺžnik s tieňom, ktorý môže obsahovať akýkoľvek Item. Môže mať tiež priradené Items k vlastnostiam header alebo footer. V tomto prípade je Kirigami.Heading jeho header a Controls.Label je contentItem karty.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Karta
Kirigami.Card dedí z AbstractCard a poskytuje viac funkcií priamo z balenia. Karty dedia rovnaký header a footer z Abstract Card, ale odporúča sa namiesto toho používať banner a sadu Kirigami.Action v skupine actions.
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"
// Nadpis môže byť umiestnený v banneri
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}
Rozloženia
Kirigami.CardsLayout je najužitočnejší, keď prezentované karty nie sú vytvorené modelom alebo sú vytvorené modelom, ktorý má vždy veľmi málo položiek. Sú prezentované ako mriežka dvoch stĺpcov, ktorá zostane vycentrovaná, ak je aplikácia naozaj široká, alebo sa zmení na jeden stĺpec, ak nie je dosť miesta pre dva stĺpce, ako na obrazovke mobilného telefónu.
Poznámka
CardsListView je vhodnejší pre väčšie modely.Karta môže byť voliteľne orientovaná horizontálne. V tomto prípade bude širšia ako vysoká a je vhodnejšia na umiestnenie v ColumnLayout. Ak ju musíte umiestniť do CardsLayout, predvolene bude mať maximumColumns nastavené na 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"
}
}
}
}
CardsListView
Kirigami.CardsListView je zobrazenie zoznamu, ktoré sa dá použiť s komponentmi AbstractCard.
CardsListView roztiahne potomkovské karty na svoju vlastnú šírku. Tento komponent by sa preto mal používať iba s kartami, ktoré budú dobre vyzerať pri akejkoľvek horizontálnej veľkosti. Použitie komponentu Card vo vnútri sa neodporúča, pokiaľ nemá Qt.Horizontal ako vlastnosť headerOrientation.
Kirigami.CardsListView {
id: view
model: 100
delegate: Kirigami.AbstractCard {
//POZNÁMKA: nikdy nedávajte Layout ako contentItem, pretože to spôsobí slučky väzieb
contentItem: Item {
implicitWidth: delegateLayout.implicitWidth
implicitHeight: delegateLayout.implicitHeight
GridLayout {
id: delegateLayout
anchors {
left: parent.left
top: parent.top
right: parent.right
//DÔLEŽITÉ: nikdy nedávajte spodný okraj
}
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")
}
}
}
}
}