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.

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

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
                }
            ]
        }
    }
}
Acções da página no computador

Acções da página no computador

Acções da página num dispositivo móvel

Acções da página num dispositivo móvel

Á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 no computador

Acções das Áreas Globais no computador

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

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.

Campo de pesquisa com texto: "Eu quero

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
             }
        ]
    }
}
O SwipeListItem num computador

O SwipeListItem num computador

O SwipeListItem num dispositivo móvel

O SwipeListItem num dispositivo móvel

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

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.