How to arrange tabs of TabView in multiple rows?

Question

From: http://doc.qt.io/qt-5/qml-qtquick-controls-tabview.html#details

TabView 
{
    Tab {
        title: "Red"
        Rectangle { color: "red" }
    }
    Tab {
        title: "Blue"
        Rectangle { color: "blue" }
    }
    Tab {
        title: "Green"
        Rectangle { color: "green" }
    }
}

These tabs get by default shown in a horizontal bar. How to display them in separate rows?

Like this:
Tab1
Tab2
Tab3

Rather than:
Tab1 Tab2 Tab3

score 5 · Accepted Answer · answered Mar 18 '15 at 13:11

You need to hide standard tab bar, and create your own vertical bar.

Row {
    Column {
        Repeater {
            model: view.count
            Rectangle {
                width: 100
                height: 40
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: view.getTab(index).title
                }
                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: view.currentIndex = index
                }
            }
        }
    }
    TabView {
        id: view
        style: TabViewStyle {
            tab: Item {}
        }

        Tab {
            title: "Red"
            Rectangle { color: "red" }
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

score 0 · Answer 2 · answered Mar 19 '15 at 13:29

I am not 100% sure what you would like to achieve here, but I had a similar requirement put to me not too long ago, and it was easily solved in the designer. In the properties section of the QTabWidget, the very first option should be tabPosition.

If you set tabPosition to "West", it will line the tabs up vertically, on the left side of your widget, but the text will be sideways as well, don't know if that is an issue for you, it wasn't in my case. I would post screenshots, but my rep is too low.

How to arrange tabs of TabView in multiple rows?

2 Answers2