org::kde::kirigami::NavigationTabBar Class Reference

Inherits QtQuick.Templates.Toolbar, and TemplatesoolBar.

Properties
color	backgroundColor
T	ButtonGroup
real	buttonWidth
int	count
int	currentIndex
color	foregroundColor
color	highlightBarColor
color	highlightForegroundColor
list	Kirigami
real	maximumContentWidth
bool	recolorIcons
bool	shadow

Detailed Description

Page navigation tab-bar, used as an alternative to sidebars for 3-5 elements.

Can be combined with secondary toolbars above (if in the footer) to provide page actions.

Example usage:

import org.kde.kirigami 2.19 as Kirigami
 
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
 
Kirigami.ApplicationWindow {
    title: "Clock"
 
    pageStack.initialPage: worldPage
    Kirigami.Page {
        id: worldPage
        title: "World"
        visible: false
    }
    Kirigami.Page {
        id: timersPage
        title: "Timers"
        visible: false
    }
    Kirigami.Page {
        id: stopwatchPage
        title: "Stopwatch"
        visible: false
    }
    Kirigami.Page {
        id: alarmsPage
        title: "Alarms"
        visible: false
    }
 
 
    footer: Kirigami.NavigationTabBar {
        actions: [
            Kirigami.Action {
                iconName: "globe"
                text: "World"
                checked: worldPage.visible
                onTriggered: {
                     if (!worldPage.visible) {
                         while (pageStack.depth > 0) {
                             pageStack.pop();
                         }
                         pageStack.push(worldPage);
                    }
                }
            },
            Kirigami.Action {
                iconName: "player-time"
                text: "Timers"
                checked: timersPage.visible
                onTriggered: {
                    if (!timersPage.visible) {
                        while (pageStack.depth > 0) {
                            pageStack.pop();
                        }
                        pageStack.push(timersPage);
                    }
                }
            },
            Kirigami.Action {
                iconName: "chronometer"
                text: "Stopwatch"
                checked: stopwatchPage.visible
                onTriggered: {
                    if (!stopwatchPage.visible) {
                        while (pageStack.depth > 0) {
                            pageStack.pop();
                        }
                        pageStack.push(stopwatchPage);
                    }
                }
            },
            Kirigami.Action {
                iconName: "notifications"
                text: "Alarms"
                checked: alarmsPage.visible
                onTriggered: {
                    if (!alarmsPage.visible) {
                        while (pageStack.depth > 0) {
                            pageStack.pop();
                        }
                        pageStack.push(alarmsPage);
                    }
                }
            }
        ]
    }
}

See also

NavigationTabButton

Since

5.87

org.kde.kirigami 2.19

Definition at line 118 of file NavigationTabBar.qml.

Property Documentation

backgroundColor

color org::kde::kirigami::NavigationTabBar::backgroundColor

read

This property holds the background color of the toolbar.

default: Kirigami.Theme.highlightColor

Definition at line 134 of file NavigationTabBar.qml.

ButtonGroup

T org::kde::kirigami::NavigationTabBar::ButtonGroup

read

This property holds the ButtonGroup used to manage the tabs.

Remarks

This property is read-only

Definition at line 171 of file NavigationTabBar.qml.

buttonWidth

real org::kde::kirigami::NavigationTabBar::buttonWidth

read

This property holds the calculated width that buttons on the tab bar use.

Since

5.102

Definition at line 187 of file NavigationTabBar.qml.

count

int org::kde::kirigami::NavigationTabBar::count

read

This property holds the number of tab buttons.

Remarks

This property is read-only

Definition at line 166 of file NavigationTabBar.qml.

currentIndex

int org::kde::kirigami::NavigationTabBar::currentIndex

read

This property holds the index of currently checked tab.

If the index set is out of bounds, or the triggered signal did not change any checked property of an action, the index will remain the same.

Definition at line 161 of file NavigationTabBar.qml.

foregroundColor

color org::kde::kirigami::NavigationTabBar::foregroundColor

read

This property holds the foreground color of the toolbar (text, icon).

Definition at line 138 of file NavigationTabBar.qml.

highlightBarColor

color org::kde::kirigami::NavigationTabBar::highlightBarColor

read

This property holds the color of the highlight bar when an action is checked.

default: Kirigami.Theme.highlightColor

Definition at line 148 of file NavigationTabBar.qml.

highlightForegroundColor

color org::kde::kirigami::NavigationTabBar::highlightForegroundColor

read

This property holds the highlight foreground color (text, icon when action is checked).

Definition at line 142 of file NavigationTabBar.qml.

Kirigami

list org::kde::kirigami::NavigationTabBar::Kirigami

read

This property holds the list of actions displayed in the toolbar.

Definition at line 124 of file NavigationTabBar.qml.

maximumContentWidth

real org::kde::kirigami::NavigationTabBar::maximumContentWidth

read

The property holds the maximum width of the toolbar actions, before margins are added.

Definition at line 128 of file NavigationTabBar.qml.

recolorIcons

bool org::kde::kirigami::NavigationTabBar::recolorIcons

read

This property sets whether the icon colors should be masked with a single color.

This only applies to buttons generated by the actions property.

default: true

Since

5.96

Definition at line 181 of file NavigationTabBar.qml.

shadow

bool org::kde::kirigami::NavigationTabBar::shadow

read

This property sets whether the toolbar should provide its own shadow.

default: true

Definition at line 154 of file NavigationTabBar.qml.

---

The documentation for this class was generated from the following file:

• NavigationTabBar.qml