Komponenty

Akcie Kirigami sa používajú na pridávanie funkcionality komponentom.

Akcie

Kirigami.Action pozostáva z klikateľnej akcie, ktorej vzhľad závisí od toho, kam je pridaná. Typicky ide o tlačidlo s ikonou a textom.

Tieto môžeme použiť na poskytnutie našim aplikáciám ľahko dostupných akcií, ktoré sú nevyhnutné pre ich funkčnosť.

Poznámka

Akcie Kirigami dedia z QtQuick.Controls.Action a možno im priradiť klávesové skratky.

Rovnako ako akcie QtQuick Controls ich možno priradiť k položkám menu a tlačidlám panela nástrojov, ale aj k mnohým ďalším komponentom Kirigami.

import org.kde.kirigami as Kirigami

Kirigami.Action {
    id: copyAction
    text: i18n("Copy")
    icon.name: "edit-copy"
    shortcut: StandardKey.Copy
    onTriggered: {
        // ...
    }
}

Poznámka

Vlastnosť icon.name prijíma názvy celosystémových ikon podľa špecifikácie FreeDesktop. Tieto ikony a názvy ikon si môžete pozrieť pomocou aplikácie CuttleFish od KDE, ktorá je súčasťou plasma-sdk, alebo návštevou špecifikácie pomenovania ikon FreeDesktop.

Jednou z funkcií ponúkaných akciami Kirigami nad rámec akcií QtQuick je možnosť vnárať akcie.

import org.kde.kirigami as Kirigami

Kirigami.Action {
    text: "View"
    icon.name: "view-list-icons"
    Kirigami.Action {
        text: "action 1"
    }
    Kirigami.Action {
        text: "action 2"
    }
    Kirigami.Action {
        text: "action 3"
    }
}

Ďalšou funkciou akcií Kirigami je poskytovanie rôznych nápovied položkám používajúcim akcie o tom, ako majú akciu zobrazovať. Tie sú primárne spracované vlastnosťami displayHint a displayComponent.

Tieto vlastnosti budú položkou rešpektované, ak je to možné. Napríklad nasledujúca akcia bude zobrazená ako TextField s položkou, ktorá sa bude snažiť zostať viditeľná čo najdlhšie.

import org.kde.kirigami as Kirigami

Kirigami.Action {
    text: "Search"
    icon.name: "search"

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Komponenty

Ako bolo spomenuté v úvodnom tutoriáli pre akcie, akcie Kirigami sú kontextové, čo znamená, že sa zobrazujú na rôznych miestach v závislosti od toho, kam ich umiestnite. Okrem toho majú tiež rôzne reprezentácie pre počítač a mobilné zariadenie.

Strana

Kirigami.Page zobrazuje akcie na pravej strane hornej hlavičky v režime pre počítač a v päte v mobilnom režime.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    width: 600
    height: 600

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: Kirigami.Page {
        title: "Demo"

        actions: [
            Kirigami.Action {
                icon.name: "go-home"
                onTriggered: showPassiveNotification("Main action triggered")
            },
            Kirigami.Action {
                icon.name: "go-previous"
                onTriggered: showPassiveNotification("Left action triggered")
            },
            Kirigami.Action {
                icon.name: "go-next"
                onTriggered: showPassiveNotification("Right action triggered")
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "bookmarks"
                onTriggered: showPassiveNotification("Contextual action 1 clicked")
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "folder"
                enabled: false
            }
        ]
    }
}

Zásuvky

Kirigami.GlobalDrawer je bočný panel podobný menu, ktorý poskytuje navigáciu založenú na akciách pre vašu aplikáciu. Tu sú vnorené akcie užitočné, pretože je možné vytvoriť vnorenú navigáciu:

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    globalDrawer: Kirigami.GlobalDrawer {
        title: "Demo"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "View"
                icon.name: "view-list-icons"
                Kirigami.Action {
                    text: "View Action 1"
                    onTriggered: showPassiveNotification("View Action 1 clicked")
                }
                Kirigami.Action {
                    text: "View Action 2"
                    onTriggered: showPassiveNotification("View Action 2 clicked")
                }
            },
            Kirigami.Action {
                text: "Action 1"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Action 2"
                onTriggered: showPassiveNotification("Action 2 clicked")
            }
        ]
    }
    //...
}

Viac o globálnych vysúvacích paneloch si môžete prečítať na stránke dokumentácie pre panely.

Zásuvky

Kirigami.ContextDrawer pozostáva z dodatočnej sady akcií, ktoré sú skryté za menu s tromi bodkami vpravo hore v režime pre počítač alebo vpravo dole v mobilnom režime, ak nie je dostatok miesta. Používa sa na zobrazenie akcií, ktoré sú relevantné iba pre konkrétnu stránku. Viac o nich si môžete prečítať v našom tutoriáli Vysúvacie panely Kirigami.

Akcie

Kirigami.ActionTextField sa používa na pridávanie kontextových akcií k textovému poľu, napríklad na vymazanie textu alebo vyhľadávanie textu.

Kirigami.ActionTextField {
    id: searchField
    rightActions: [
        Kirigami.Action {
            icon.name: "edit-clear"
            visible: searchField.text !== ""
            onTriggered: {
                searchField.text = ""
                searchField.accepted()
            }
        }
    ]
}

V tomto príklade vytvárame tlačidlo "vymazať" pre vyhľadávacie pole, ktoré je viditeľné iba keď je zadaný text.

Poznámka

ActionTextField by ste mali používať priamo len zriedka. SearchField a PasswordField oba dedia z ActionTextField a pravdepodobne pokryjú váš požadovaný prípad použitia.

SwipeListItem

Kirigami.SwipeListItem je delegát určený na podporu extra akcií. Pri použití myši sa jeho akcie vždy zobrazujú. Na dotykovom zariadení ich možno zobraziť potiahnutím položky pomocou úchytu. Na nasledujúcich obrázkoch sú to ikony vpravo.

ListView {
    model: myModel
    delegate: SwipeListItem {
        Controls.Label {
            text: model.text
        }
        actions: [
             Action {
                 icon.name: "document-decrypt"
                 onTriggered: print("Action 1 clicked")
             },
             Action {
                 icon.name: model.action2Icon
                 onTriggered: //Robiť niečo
             }
        ]
    }
}

Akcie

Kirigami.ActionToolBar je panel nástrojov zostavený zo zoznamu akcií. Štandardne bude každá akcia, ktorá sa zmestí do panela nástrojov, reprezentovaná ako ToolButton, pričom tie, ktoré sa nezmestia, budú presunuté do menu na konci panela nástrojov.

Rovnako ako ActionTextField, nemusíte používať ActionToolBar priamo, pretože sa používa hlavičkami stránok a kartami na zobrazenie ich akcií.

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Actions Demo"
    width: 350
    height: 350
    header: Kirigami.ActionToolBar {
        actions: [
            Kirigami.Action {
                text: i18n("View Action 1")
                onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
            },
            Kirigami.Action {
                text: i18n("View Action 2")
                onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
            },
            Kirigami.Action {
                text: i18n("Action 1")
                onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
            },
            Kirigami.Action {
                text: i18n("Action 2")
                onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
            }
        ]
    }
}

Horizontálny panel nástrojov zobrazený v hornej časti aplikácie

Viac o komponentoch ActionToolBar si môžete prečítať na ich venovanej stránke dokumentácie.

Karta

Kirigami.Card sa používa na zobrazenie zbierky informácií alebo akcií spolu. Tieto akcie možno pridať do skupiny actions, podobne ako pri predchádzajúcich komponentoch.

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"
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

Screenshot of a full-fledged Card with a banner background behind its title, white background behind its text, and two actions with icons and a hamburger menu at the bottom

Viac informácií nájdete na stránke komponentu pre karty.

Typografia

Riadky stránok a zásobníky stránok