How to convert horizontal menu tab to vertical in QML?

Question

I want to convert a horizontal menu tab to vertical menu tab, I wrote the following code:

  TabView {
       id: frame
       anchors.fill: parent
       anchors.margins: 4
       Tab { title: "Tab 1" }
       Tab { title: "Tab 2" }
       Tab { title: "Tab 3" }

       style: TabViewStyle {
           frameOverlap: 1
           tab: Rectangle {
               color: styleData.selected ? "steelblue" :"lightsteelblue"
               border.color:  "steelblue"
               implicitWidth: Math.max(text.width + 4, 80)
               implicitHeight: 20
               radius: 2
               Text {
                   id: text
                   anchors.centerIn: parent
                   text: styleData.title
                   color: styleData.selected ? "white" : "black"
               }
           }
           frame: Rectangle { color: "steelblue" }
       }
   }

Any help? Thanks.

@jbh Why you deleted the code? I spoke a thing that you didn't like? — Janilson Duarte, Jan 17 '19 at 15:19
I would suggest making your own with Qt Quick Controls 2: https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html#details A StackLayout, ButtonGroup, and column of TabButtons should do the trick. — Mitch, Jan 18 '19 at 14:08
You could probably do the same with Qt Quick Controls 1, too; just use ExclusiveGroup instead of ButtonGroup: http://doc.qt.io/qt-5/qml-qtquick-controls-exclusivegroup.html — Mitch, Jan 18 '19 at 14:09

score 1 · Accepted Answer · answered Jan 28 '19 at 14:52

People, I did many experiencs but almost nothing worked until I found this post https://evileg.com/en/post/191/ that helped me and I used to turn the menu horizontal to vertical. below is the code I used.

Thank you very much!

// Layer with buttons that will change the fragments
RowLayout {
    id: rowLayout
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.leftMargin: 0
    anchors.margins: 15

    Button {
        id: button1
        anchors.left: rowLayout.left
        text: qsTr("Fragment 1")
        // Download the component from a file
        onClicked: loader.source = "Fragment1.qml"
    }

    Button {
        id: button2
        anchors.left: rowLayout.left
        anchors.top: button1.bottom
        text: qsTr("Fragment 2")
        // Loading setSource component through the method of installing the fragment parameters
        onClicked: loader.setSource("Fragment2.qml")
    }

    Button {
        id: button3
        anchors.left: rowLayout.left
        anchors.top: button2.bottom

        text: qsTr("Fragment 3")
        // Loading setSource component through the method of installing the fragment parameters
        onClicked: loader.setSource("Fragment3.qml")
    }

    Button {
        id: button4
        anchors.left: rowLayout.left
        anchors.top: button3.bottom

        text: qsTr("Fragment 4")
        // Installing a fragment from the Component
        onClicked: loader.sourceComponent = fragment4
    }

    Button {
        id: button5
        anchors.left: rowLayout.left
        anchors.top: button4.bottom

        text: qsTr("Fragment 5")
        // Installing a fragment from the Component
        onClicked: loader.sourceComponent = fragment5
    }
}

Loader {
    id: loader
    anchors.top: rowLayout.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    anchors.topMargin: -40
    anchors.leftMargin: 63
    source: "Fragment1.qml"
}

How to convert horizontal menu tab to vertical in QML?

1 Answers1