Componentes baseados em ações

As ações do Kirigami são usadas para adicionar funcionalidade aos componentes.

Ações

Uma Kirigami.Action consiste em uma ação clicável cuja aparência depende de onde é adicionada. Normalmente, é um botão com um ícone e texto.

Podemos usá-las para fornecer aos nossos aplicativos ações fáceis de alcançar que são essenciais para sua funcionalidade.

Nota

As ações Kirigami herdam de QtQuick.Controls.Action e podem receber atalhos.

Assim como as Ações de Controles QtQuick, elas podem ser atribuídas a itens de menu e botões da barra de ferramentas, mas também a vários outros componentes Kirigami.

import org.kde.kirigami as Kirigami

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

Nota

A propriedade icon.name aceita nomes para ícones de todo o sistema, seguindo a especificação do FreeDesktop. Esses ícones e nomes de ícones podem ser visualizados com o aplicativo CuttleFish do KDE, que acompanha o plasma-sdk, ou visitando a especificação de nomenclatura de ícones do FreeDesktop.

Uma funcionalidade oferecida pelas ações do Kirigami, além das oferecidas pelas ações do QtQuick, é a possibilidade de aninhar ações.

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

Outra funcionalidade das ações do Kirigami é fornecer várias dicas aos itens usando ações sobre como eles devem exibir a ação. Essas dicas são tratadas principalmente pelas propriedades displayHint e displayComponent.

Essas propriedades serão respeitadas pelo item, se possível. Por exemplo, a ação a seguir será exibida como um TextField com o item se esforçando ao máximo para se manter visível o máximo possível.

import org.kde.kirigami as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Usando ações em outros componentes

Conforme mencionado no tutorial de introdução às ações, as Ações Kirigami são contextuais, o que significa que aparecem em locais diferentes dependendo de onde você as coloca. Além disso, elas também têm representações diferentes para desktop e dispositivos móveis.

Página

Uma Kirigami.Page mostra ações à direita do cabeçalho superior no modo desktop e no rodapé no modo celular.

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

Gaveta global

A Kirigami.GlobalDrawer é uma barra lateral semelhante a um menu que fornece uma navegação baseada em ações para o seu aplicativo. É aqui que as ações aninhadas são úteis, pois é possível criar uma navegação aninhada:

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

Você pode ler mais sobre Gavetas Globais na página de documentação para gavetas.

Gaveta de contexto

Uma Kirigami.ContextDrawer consiste em um conjunto adicional de ações que ficam ocultas atrás de um menu de três pontos no canto superior direito no modo desktop ou no canto inferior direito no modo celular se não houver espaço. Ela é usada para exibir ações relevantes apenas para uma página específica. Você pode ler mais sobre elas em nosso tutorial Gavetas do Kirigami.

ActionTextFields

Um Kirigami.ActionTextField é usado para adicionar algumas ações contextuais a um campo de texto, por exemplo, para limpar o texto ou para pesquisar o texto.

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

Neste exemplo, estamos criando um botão "limpar" para um campo de pesquisa que só fica visível quando o texto é inserido.

Nota

Você raramente deve usar um ActionTextField diretamente. SearchField e PasswordField herdam de ActionTextField e provavelmente cobrirão o caso de uso desejado.

SwipeListItem

Um Kirigami.SwipeListItem é um delegado destinado a oferecer suporte a ações extras. Ao usar um mouse, suas ações serão sempre exibidas. Em um dispositivo de toque, elas podem ser exibidas arrastando o item com a alça. Nas imagens a seguir, 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: //faz alguma coisa
             }
        ]
    }
}

ActionToolBar

Uma Kirigami.ActionToolBar é uma barra de ferramentas construída a partir de uma lista de ações. Por padrão, cada ação que cabe na barra de ferramentas será representada por um ToolButton, com aquelas que não couberem sendo movidas para um menu no final da barra de ferramentas.

Assim como ActionTextField, você pode não precisar usar ActionToolBar diretamente, pois ela é usada por cabeçalhos de página e cartões para fornecer sua exibição de ação.

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

Uma barra de ferramentas horizontal sendo exibida na parte superior do aplicativo

Você pode ler mais sobre os componentes ActionToolBar em sua página de documentação dedicada.

Cartões

Um Kirigami.Card é usado para exibir uma coleção de informações ou ações em conjunto. Essas ações podem ser adicionadas ao grupo ações, 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"
    }
}

Captura de tela de um Card completo com um banner atrás do título, fundo branco atrás do texto e duas ações com ícones e um menu de hambúrguer na parte inferior

Para mais informações consulte a página de componentes para Cards.

Tipografia

Linhas de páginas e pilhas de páginas