Składniki oparte na działaniach

Działania Kirigami są używane do dodawania możliwości do składników.

Działania

Działanie Kirigami stanowi działanie z interfejsu użytkownika. Można je wykorzystać, aby dać naszej aplikacji łatwodostępne działania, które są istotne dla jej funkcjonalności.

Uwaga

Kirigami actions inherit from Qt Quick Controls 2 Action and can be assigned shortcuts.

Tak jak działania QtQuick Controls, można je przypisać do wpisów menu oraz przycisków paska narzędzi, ale także do różnych innych składników Kirigami.

import org.kde.kirigami 2.13 as Kirigami

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

Uwaga

Właściwość icon.name przyjmuje nazwy ikon systemowych zgodnych z wytycznymi FreeDesktop. Ikony te i ich nazwy można obejrzeć w aplikacji KDE o nazwie CuttleFish lub odwiedzając wytyczne nazywania ikon we FreeDesktop.

Działania Kirigami dają możliwość nad działaniami QtQuick taką, że można je zagnieżdżać.

import org.kde.kirigami 2.13 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"
    }
}

Inną możliwością Działań Kirigami jest dostarczenie rozmaitych wskazówek do rzeczy, używających działań, na temat tego jak powinny wyświetlać działania. Są one głównie obsługiwane przez właściwości displayHint oraz displayComponent.

Te właściwości będą uznawane przez rzecz, jeśli będzie to możliwe. Na przykład, następujące działanie zostanie wyświetlone jako TextField, gdzie rzecz będzie się starała utrzymać tekst widocznym tak długo jak to możliwe.

import org.kde.kirigami 2.13 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Używanie działań w innych składnikach

Strona

Jedną z cech stron jest to, że można do nich dodać działania.

Możesz dodać główne działanie, lewe i prawe działanie oraz dodatkowe działania podręczne, które są wyświetlane na pasku narzędzi, gdy będzie wystarczająco miejsca lub w menu hamburger na mniejszych ekranach.

import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {
    title: i18n("Demo")

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

Działania stron na urządzeniach biurkowych

Działania stron na urządzeniach przenośnych

Ostrzeżenie

To make the context actions work on mobile, you need to add a ContextDrawer to your Kirigami.ApplicationWindow .

Kirigami.ApplicationWindow {
    ...
    contextDrawer: Kirigami.ContextDrawer {
        id: contextDrawer
    }
    ...
}

Globalna belka

Globalna półka dodaje rzecz do poruszania się po twojej aplikacji na podstawie działań. Jest to miejsce, w którym użyteczne są zagnieżdżone działania, bo umożliwia ci tworzenie zagnieżdżonych rzeczy do poruszania się.

Kirigami.ApplicationWindow {
    title: i18n("Demo")
    globalDrawer: Kirigami.GlobalDrawer {
        title: i18n("Demo")
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: i18n("View")
                icon.name: "view-list-icons"
                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"))
            }
        ]
    }
    ...
}

Działania globalnych półek na urządzeniach biurkowych

Działania globalnych półek na urządzeniach przenośnych

Więcej o globalnych półkach możesz poczytać na stronie dokumentacji poświęconej półkom.

ActionTextFields

Kirigami ActionTextField jest używany do dodanie pewnych działań podręcznych do pola tekstowego, na przykład aby wyczyścić tekst lub wyszukać jakiegoś tekstu.

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

W tym przykładzie, tworzymy przycisk czyszczenia pola wyszukiwania tylko wtedy, gdy jakiś tekst został wpisany.

Uwaga

You should only rarely use an ActionTextField directly. The two major use cases for an ActionTextField are provided by SearchField and PasswordField . Both inherit from ActionTextField.

SwipeListItem

SwipeListItem jest delegatem stworzonym do obsługi dodatkowych działań. Zostaną one pokazane, przy najechaniu na nie myszy.Na urządzeniach dotykowych, będą pokazywane po przeciągnięciu rzeczy za jej uchwyt.

ListView {
    model: myModel
    delegate: SwipeListItem {
        QQC2.Label {
            text: model.text
        }
        actions: [
             Action {
                 icon.name: "document-decrypt"
                 onTriggered: print("Action 1 clicked")
             },
             Action {
                 icon.name: model.action2Icon
                 onTriggered: // zrób coś
             }
        ]
    }
}

SwipeListItem na urządzeniach biurkowych

SwipeListItem na urządzeniach przenośnych

ActionToolBar

ActionToolBar jest paskiem narzędzi zbudowanym z listy działań. Domyślnie, każde działanie, które zmieści się na pasku narzędzi będzie przedstawione przyciskiem ToolButton, podczas gdy te, które się nie zmieszczą będą przeniesione do menu na końcu paska narzędzi.

Tak jak ActionTextField, możesz potrzebować użyć ActionToolBar bezpośrednio tak jak jest używany przez nagłówki stron oraz karty, aby wyświetlić ich działania.

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"))
        }
    ]
}

Więcej o składnikach ActionToolBar możesz przeczytać na stronach dokumentacji im poświęconych.

Karty

Składniki kart także mogą przyjąć działanie. Po więcej szczegółów zajrzyj na stronę składnika dla kart.

Barwy i tryby barw w Kirigami

Typografia