components-actiontoolbar.md 3.75 KB
Newer Older
1
2
3
4
5
---
title: Action Tool Bars
weight: 110
description: Create your own customisable tool bars with the ActionToolBar component
group: components
6
7
aliases:
  - /docs/kirigami/components-actiontoolbar/
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
---

While Kirigami pages allow you to easily place a set of actions in the page header, there are times when you might prefer to have something more flexible.

Kirigami provides the component `Kirigami.ActionToolBar`. It will display a list of `Kirigami.Action` objects and will display as many of them as possible, providing an overflow menu for the ones that don't fit. The ActionToolBar is dynamic and will move actions in and out of the overflow menu depending on the size available to it.

{{< alert title="Note" color="info" >}}
This page assumes you are familiar with `Kirigami.Action` objects. If you are not, you can learn all about them in our beginner tutorial or in [the dedicated documentation page for them](../components-actions/).
{{< /alert >}}

## Creating our first ActionToolBar

The layout and location of your `Kirigami.ActionToolBar` are really up to you, though for the sake of user-friendliness it is usually a good idea to stick to UI conventions and put your toolbar near the top or bottom of your page and to have it spread width-wise. 

Like most other action-holding components, `Kirigami.ActionToolBar` has an `actions` property. We can assign an array of `Kirigami.Action` components to this property.

```qml
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 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 { }
            }
        ]
    }

}
```

{{< compare >}}
{{< figure class="text-center" caption="ActionToolBar with enough space for all children" src="actiontoolbar.png" >}}
{{< figure class="text-center" caption="ActionToolBar with overflow menu containing children" src="actiontoolbar-overflow.png" >}}
{{< /compare >}}

### Alignment

By default, actions in the ActionToolBar will be left aligned. This might not be desirable in all situations. Thankfully we can change this with the `alignment` property. We can set this property to a range of values, but the three most relevant ones for an ActionToolBar are `Qt.AlignLeft`, `Qt.AlignCenter`, and `Qt.AlignRight` (which deal with horizontal alignment).

{{< sections >}}
{{< section-left >}}

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

        alignment: Qt.AlignCenter

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

{{< /section-left >}}
{{< section-right >}}

102
![ActionToolBar with children center-aligned](/docs/use/kirigami/components-actiontoolbar/actiontoolbar-alignment.png)
103
104
105

{{< /section-right >}}
{{< /sections >}}