Componentes baseados em acções

As Acções do Kirigami são usadas para adicionar funcionalidades aos componentes.

Acções

Uma Kirigami.Action encapsula uma acção da interface do utilizador. Podemos usá-las para oferecer às nossas aplicações acções fáceis de aceder e que são essenciais à sua funcionalidade.

Nota

As acções do Kirigami herdam do Action do QtQuick Controls e podem ter atribuídos atalhos de teclado.

Como as Action's do QtQuick Controls , as mesmas poderão ser associadas não só aos itens do menu e aos botões das barras de ferramentas, mas também a vários outros componentes do Kirigami.

import org.kde.kirigami 2.20 as Kirigami

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

Nota

A propriedade icon.name recebe os nomes dos ícones de sistema de acordo com a especificação do FreeDesktop. Estes ícones e nomes de ícones podem ser vistos com a aplicação Cuttlefish, que vem com o pacote plasma-sdk, ou indo à especificação de nomes de ícones do FreeDesktop.

Uma funcionalidade oferecida pelas Acções do Kirigami sobre as Action's do QtQuick é a possibilidade de encadear acções.

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

Outra funcionalidade das acções do Kirigami é fornecer várias dicas aos itens que usam acções, sobre a forma como devem mostra a acção. Estas são tratadas principalmente pelas propriedades displayHint and displayComponent .

Estas propriedades serão respeitadas pelo item, se possível. Por exemplo, as seguintes acções serão apresentadas como um TextField com o item a tentar o seu melhor em manter o item visível o máximo de tempo possível.

import org.kde.kirigami 2.20 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Usar as acções noutros componentes

Página

Uma das funcionalidades do Kirigami.Page é que poderá adicionar Action's a elas.

Poderá adicionar uma acção actions.main, uma action.left e uma action.right e acções de contexto adicionais que aparecem na barra de ferramentas, caso exista espaço suficiente, ou num menu em hambúrguer nos ecrãs mais pequenos.

 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
import org.kde.kirigami 2.20 as Kirigami

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

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

        actions {
            main: Kirigami.Action {
                icon.name: "go-home"
                onTriggered: showPassiveNotification("Main action triggered")
            }
            left: Kirigami.Action {
                icon.name: "go-previous"
                onTriggered: showPassiveNotification("Left action triggered")
            }
            right: Kirigami.Action {
                icon.name: "go-next"
                onTriggered: showPassiveNotification("Right action triggered")
            }
            contextualActions: [
                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
                }
            ]
        }
    }
}

Aviso

Para fazer com que as acções do contexto funcionem em dispositivos móveis, precisa de adicionar uma ContextDrawer na sua Kirigami.ApplicationWindow .

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

Área Global

A área global oferece uma navegação baseada em acções à sua aplicação. Este é o local em que as acções encadeadas são úteis, porque lhe permite criar uma navegação encadeada:

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

Acções das Áreas Globais num dispositivo móvel

Poderá ler mais sobre as Áreas Globais na página de documentação das mesmas.

ActionTextFields

Um Kirigami.ActionTextField é usado para adicionar algumas acções de contexto a um campo de texto, como por exemplo limpar o texto ou procurar pelo mesmo.

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

Neste exemplo, estamos a criar um botão "limpar" para um campo de pesquisa que só aparece quando tiver introduzido algum texto.

Nota

Raramente deverá usar um ActionTextField directamente. O SearchField e o PasswordField herdam ambos de ActionTextField e provavelmente irão cobrir o seu caso de uso desejado.

SwipeListItem

Um Kirigami.SwipeListItem é um objecto-delegado que pretende dar suporte a acções extras. Ao usar um rato, as mesmas irão aparecer à passagem. Num dispositivo táctil, as mesmas poderão aparecer se arrastar o item com a pega. Nas seguintes imagens, estes são os ícones à direita.

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: // fazer algo
             }
        ]
    }
}

ActionToolBar

Uma Kirigami.ActionToolBar é uma barra de ferramentas construída com base numa lista de acções. Por omissão, cada acção que caiba na barra de ferramentas será representada como um ToolButton , sendo que as que não caibam irão para um menu no fim da barra de ferramentas.

Como o ActionTextField , poderá não necessitar de usar o ActionToolBar directamente, dado que é usado pelos cabeçalhos das páginas e cartões para fornecer a sua apresentação das acções.

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

Uma barra de ferramentas horizontal a ser apresentada no topo da aplicação

Poderá ler mais sobre os componentes ActionToolBar na sua página de documentação dedicada.

Cartões

Um Kirigami.Card é usado para apresentar uma colecção de informações ou acções em conjunto. Estas acções poderão ser adicionadas ao grupo actions, de forma semelhante aos componentes anteriores.

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

Imagem de um Card completo com um fundo separador debaixo do seu título, um fundo branco atrás do seu texto e duas acções com ícones e um menu em hambúrguer no fundo

Para mais informações, consulte a página dos componentes Card.

Tipografia

Linhas da página e pilhas de páginas