Компоненты на основе действий

Действия Kirigami используются для добавления функциональности компонентам.

Действия

Kirigami.Action — это действие, на которое можно нажать; его внешний вид зависит от того, куда оно добавлено. Обычно это кнопка со значком и текстом.

С их помощью можно снабдить приложения легко доступными действиями, необходимыми для их работы.

Примечание

Действия Kirigami наследуются от QtQuick.Controls.Action, и им можно назначить комбинации клавиш.

Как и действия QtQuick Controls, их можно назначать пунктам меню и кнопкам панели инструментов, а также многим другим компонентам Kirigami.

import org.kde.kirigami as Kirigami

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

Примечание

Свойство icon.name принимает имена общесистемных значков в соответствии со спецификацией FreeDesktop. Эти значки и их имена можно просмотреть в приложении CuttleFish из KDE, входящем в состав plasma-sdk, или на странице спецификации именования значков FreeDesktop.

Одна из возможностей, которые действия Kirigami предоставляют в дополнение к действиям QtQuick, — вложение действий.

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

Ещё одна возможность действий Kirigami — предоставлять элементам, использующим действия, различные подсказки о том, как им следует показывать действие. За это в первую очередь отвечают свойства displayHint и displayComponent.

Элемент будет учитывать эти свойства, если это возможно. Например, следующее действие будет показано как TextField, при этом элемент будет стараться как можно дольше оставаться видимым.

import org.kde.kirigami as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Использование действий в других компонентах

Как упоминалось в вводном руководстве по действиям, действия Kirigami являются контекстными, то есть они появляются в разных местах в зависимости от того, куда их поместить. Кроме того, они имеют различные представления для настольных компьютеров и мобильных устройств.

Страница

В настольном режиме Kirigami.Page показывает действия справа от верхнего заголовка, а в мобильном — в нижнем колонтитуле.

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

Действия страницы на мобильном устройстве

Глобальная выдвижная панель

Kirigami.GlobalDrawer — это боковая панель в стиле меню, обеспечивающая навигацию по приложению на основе действий. Здесь вложенные действия оказываются полезны, поскольку позволяют создавать вложенную навигацию:

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

Действия глобальной выдвижной панели на рабочем столе

Подробнее о глобальных выдвижных панелях можно прочитать на странице документации по выдвижным панелям.

Контекстная выдвижная панель

Kirigami.ContextDrawer состоит из дополнительного набора действий, скрытых за меню с тремя точками в правом верхнем углу в настольном режиме или в правом нижнем углу в мобильном режиме, если не хватает места. Он используется для показа действий, относящихся только к определённой странице. Подробнее о них можно прочитать в руководстве Kirigami Drawers.

Текстовые поля действия

Kirigami.ActionTextField используется для добавления к текстовому полю контекстных действий, например для очистки текста или поиска по нему.

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

В этом примере создаётся кнопка «Очистить» для поля поиска, которая показывается только при вводе текста.

Примечание

Напрямую использовать ActionTextField следует редко. SearchField и PasswordField оба наследуются от ActionTextField и, вероятно, охватывают нужный сценарий использования.

Элемент списка со смахиванием

Kirigami.SwipeListItem — это делегат, предназначенный для поддержки дополнительных действий. При использовании мыши его действия показываются всегда. На сенсорном устройстве их можно показать, перетащив элемент за маркер. На следующих рисунках это значки справа.

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: //сделать что-то
             }
        ]
    }
}

Панель действий

Kirigami.ActionToolBar — это панель инструментов, создаваемая из списка действий. По умолчанию каждое действие, помещающееся на панели инструментов, показывается кнопкой ToolButton, а не помещающиеся перемещаются в меню в конце панели инструментов.

Как и ActionTextField, ActionToolBar можно не использовать напрямую, поскольку он применяется в заголовках страниц и карточках для показа действий.

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

Горизонтальная панель инструментов, показываемая в верхней части приложения

Подробнее о компонентах ActionToolBar можно прочитать на отдельной странице документации.

Карточки

Kirigami.Card используется для совместного показа набора сведений или действий. Эти действия можно добавить в группу actions, подобно предыдущим компонентам.

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

Снимок экрана полноценной карточки с фоновым баннером за заголовком, белым фоном за текстом и двумя действиями со значками и меню-гамбургером внизу

Подробнее о компоненте Cards можно прочитать на странице компонента.

Типографика

Стеки страниц (page rows и page stacks)