Панелі інструментів дій

Хоча сторінки Kirigami надають вам змогу без проблем розташовувати набір кнопок дій у шапці сторінки, іноді варто скористатися гнучкішим інструментом.

До складу Kirigami включено компонент Kirigami.ActionToolBar . Він показує список об'єктів Kirigami.Action так, щоб область перегляду вмістила якомога більше об'єктів, надаючи меню переповнення із тими об'єктами, які не вмістилися до області перегляду. ActionToolBar є динамічним об'єктом — пересуває пункти до меню переповнення і з меню переповнення, залежно від доступного розміру.

Створюємо нашу першу ActionToolBar

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

Подібно до більшості компонентів, які містять пункти дій, Kirigami.ActionToolBar має властивість actions . Пов'язати із цією властивістю можна масив компонентів Kirigami.Action .

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.Page {

    Kirigami.ActionToolBar {
        anchors.fill: parent

         actions: [
            Kirigami.Action { 
                text: "Beep" 
                icon.name: "notifications" 
                onTriggered: showPassiveNotification("BEEP!") 
            },
            Kirigami.Action { 
                text: "Action Menu" 
                icon.name: "overflow-menu"

                Kirigami.Action { 
                    text: "Deet"; 
                    icon.name: "notifications" 
                    onTriggered: showPassiveNotification("DEET!") 
                }
                Kirigami.Action { 
                    text: "Doot"; 
                    icon.name: "notifications" 
                    onTriggered: showPassiveNotification("DOOT!") 
                }
            },
            Kirigami.Action {
                icon.name: "search"
                displayComponent: Kirigami.SearchField { }
            }
        ]
    }

}

Вирівнювання

Типово, пункти дій на ActionToolBar буде вирівняно ліворуч. Таке вирівнювання є не завжди бажаним. На щастя, ми можемо змінити це за допомогою властивості alignment . Для цієї властивості ви можете встановити діапазон значень, але трьома найпоширенішими для ActionToolBar є Qt.AlignLeft, Qt.AlignCenter і Qt.AlignRight (які стосуються горизонтального вирівнювання ).

Controls.GroupBox {
    Layout.fillWidth: true
        
    Kirigami.ActionToolBar {
        anchors.fill: parent

        alignment: Qt.AlignCenter

        actions: [
            Kirigami.Action { 
                text: "Beep" 
                icon.name: "notifications" 
                onTriggered: showPassiveNotification("BEEP!") 
            }
        ]
    }
    
}