NavigationTabBar QML Type

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

Import Statement: import org.kde.kirigami
Since: 5.87
Inherits:

ToolBar

Properties

Detailed Description

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

Example usage:

import QtQuick
import org.kde.kirigami 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 {
                icon.name: "globe"
                text: "World"
                checked: worldPage.visible
                onTriggered: {
                     if (!worldPage.visible) {
                         while (pageStack.depth > 0) {
                             pageStack.pop();
                         }
                         pageStack.push(worldPage);
                    }
                }
            },
            Kirigami.Action {
                icon.name: "player-time"
                text: "Timers"
                checked: timersPage.visible
                onTriggered: {
                    if (!timersPage.visible) {
                        while (pageStack.depth > 0) {
                            pageStack.pop();
                        }
                        pageStack.push(timersPage);
                    }
                }
            },
            Kirigami.Action {
                icon.name: "chronometer"
                text: "Stopwatch"
                checked: stopwatchPage.visible
                onTriggered: {
                    if (!stopwatchPage.visible) {
                        while (pageStack.depth > 0) {
                            pageStack.pop();
                        }
                        pageStack.push(stopwatchPage);
                    }
                }
            },
            Kirigami.Action {
                icon.name: "notifications"
                text: "Alarms"
                checked: alarmsPage.visible
                onTriggered: {
                    if (!alarmsPage.visible) {
                        while (pageStack.depth > 0) {
                            pageStack.pop();
                        }
                        pageStack.push(alarmsPage);
                    }
                }
            }
        ]
    }
}

See also NavigationTabButton.

Property Documentation

actions : T.Action

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


buttonWidth : real [since 5.102]

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

This property was introduced in 5.102.


count : int [read-only]

This property holds the number of tab buttons.


currentIndex : int

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.


maximumContentWidth : real

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


tabGroup : T.ButtonGroup [read-only]

This property holds the ButtonGroup used to manage the tabs.


visibleActions : T.Action [read-only]

This property holds a subset of visible actions of the list of actions.

An action is considered visible if it is either a Kirigami.Action with visible property set to true, or it is a plain QQC2.Action.