Qt Qml Vertical Tabbar

Question

I would like to add Vertical TabBar to my app in a similar manner of what Qt Creater is doing in their app (as shown in picture). I have been searching how to simple make the TabBar vertical, yet did not find proper answers (thought its common to have it vertical).

Question: How could I make a Vertical Tab to navigate through the different qml files I have? If there are more suitable options, please suggest.

Answer 1

A TabBar just uses a common ListView to display a bunch of TabButtons. You can customize it by overwriting the contentItem property and making the ListView vertical, like this:

// VertTabBar.qml
TabBar {
    id: control

    contentItem: ListView {
        model: control.contentModel
        currentIndex: control.currentIndex

        spacing: control.spacing
        orientation: ListView.Vertical   // <<-- VERTICAL
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.AutoFlickIfNeeded
        snapMode: ListView.SnapToItem

        highlightMoveDuration: 0
        highlightRangeMode: ListView.ApplyRange
        preferredHighlightBegin: 40
        preferredHighlightEnd: height - 40
    }
}