CODEWITHSUNDEEP
qtqmlqt5qtquick2qtquickcontrols
Aquarius_Girl
Aquarius_Girl

Reputation: 22916

How to arrange tabs of TabView in multiple rows?

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

Upvotes: 5

Views: 2931

Answers (2)

Louis Parkin
Louis Parkin

Reputation: 966

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.

Upvotes: 0

Meefte
Meefte

Reputation: 6735

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" }
        }
    }
}

Upvotes: 5

Related Questions