Åtgärdsbaserade komponenter

Åtgärder (Actions) i Kirigami används för att lägga till funktionalitet i komponenter.

Åtgärder

En åtgärd (Action) i Kirigami inkapslar en åtgärd i ett användargränssnitt. Vi kan använda dem för att tillhandahålla åtgärder i våra program som är enkla att nå och är grundläggande för deras funktion.

Anmärkning

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

Liksom åtgärder i QtQuick Controls, kan de tilldelas till menyalternativet och verktygsradsknappar, men också till flera andra komponenter i Kirigami.

import org.kde.kirigami 2.13 as Kirigami

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

Anmärkning

Egenskapen icon.name använder namn på systemomfattande ikoner enligt FreeDesktop-specifikationen. Ikonerna och ikonnamnen kan visas med KDE:s program CuttleFish, eller genom att besöka FreeDesktops specifikation för namngivning av ikoner.

En funktion som åtgärder i Kirigami erbjuder över QtQuick Actions är möjligheten att nästla åtgärder.

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

En annan funktion i Kirigamis åtgärder är att tillhandahålla olika tips för objekt som använder åtgärder om hur de ska visa åtgärden. De hanteras i huvudsak av egenskaperna displayHint och displayComponent.

Egenskaperna respekteras av objektet om möjligt. Exempelvis visas följande åtgärd som ett textfält och objektet gör sitt bästa för att hålla objektet synligt så länge som möjligt.

import org.kde.kirigami 2.13 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Använda åtgärder i andra komponenter

Sida

En av funktionerna i sidor är att åtgärder kan läggas till i dem.

Du kan lägga till en huvudåtgärd, en vänster- och högeråtgärd och ytterligare sammanhangsberoende åtgärder som visas i verktygsraden om det finns tillräckligt med plats eller in en hamburgermeny på mindre skärmar.

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

Varning

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
    }
    ...
}

Global låda

Den globala lådan tillhandahåller en åtgärdsbaserad navigering i programmet. Det är stället där nästlade åtgärder är användbara eftersom de låter dig skapa nästlad navigering:

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

Globala lådornas åtgärder på skrivbordet

Du kan läsa mer om globala lådor på dokumentationssidan för lådor.

ActionTextFields

Ett Kirigami ActionTextField används för att lägga till några sammanhangsberoende åtgärder i ett textfält, exempelvis för att rensa texten eller söka efter texten.

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

I det här exemplet skapar vi en rensningsknapp för ett sökfält som bara är synligt när text matas in.

Anmärkning

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

En SwipeListItem är en delegat avsedd att stödja extra åtgärder. När en mus används, visas de när den hålls över dem. På en pekskärm kan de visas genom att dra objektet med greppet.

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: // gör någonting
             }
        ]
    }
}

ActionToolBar

En ActionToolBar är en verktygsrad byggd av en lista över åtgärder. Normalt representeras varje åtgärd som får plats på verktygsraden med en verktygsknapp, medan de som inte får plats flyttas till en meny i slutat på verktygsraden.

Liksom ActionTextField, behöver du nog inte använda ActionToolBar direkt, eftersom den används av sidhuvuden och kort för att tillhandahålla deras egen åtgärdsvisning.

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

Du kan läsa mer om komponenter i ActionToolBar på deras dedicerade dokumentationssida.

Cards

Komponenterna i Cards kan också använda en åtgärd. För mer information se komponentsidan för Cards.

Färger och teman i Kirigami

Sidrader och sidstaplar