Kartice
About Kirigami API documentation: use https://api-staging.kde.org/kirigami-index.html for now
Click here to read more
We are aware of issues involving broken links to Kirigami API documentation. We are currently working on a better website to address these issues, porting the API docs where possible.
In its current state, the staging API website under development for Kirigami can be used to access all relevant Kirigami API pages, and it should already work better than the previous API website. You can access the staging API website through https://api-staging.kde.org/kirigami-index.html.
If you'd like to assist us in our efforts to port the API documentation, take a look at our Port API documentation to QDoc metatask.
Tipi KirigamiAbstractCard and 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 views in pozicionerjev positioners, 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 Item v njem. Lahko ima tudi postavke, dodeljene lastnostim header ali footer. V tem primeru je njegova glava Kirigami.Heading oznaka kontrole Controls.Label vsebine kartice contentItem.
Kirigami.AbstractCard {
Layout.fillHeight: true
header: Kirigami.Heading {
text: qsTr("AbstractCard")
level: 2
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "..."
}
}
Kartica
Kirigami.Card deduje od AbstractCard in neposredno nudi več zmožnosti. Kartice dedujejo isto glavo header in nogo footer iz abstraktne kartice, ampak spodbujamo rabo pasice banner iz zbirko Kirigami.Action namesto 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"
// 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.
Opomba
CardsListView je bolje prilagojen za večje modele.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 največ 2 stolpca maximumColumns.
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 pogled seznama, ki ga lahko uporabljate s komponentami AbstractCard.
CardsListView bo raztegnil otroške kartice na lastno širino. To komponento se zato sme uporabiti samo s karticami, ki bodo dobro videti v kateri koli vodoravni velikosti. Uporaba komponente Card znotraj odsvetujemo, razen če ima orientacijo Qt.Horizontal kot lastnost glave headerOrientation.
Izbira med uporabo tega pogleda s komponentami AbstractCard ali 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")
}
}
}
}
}