Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How can i create vertical tab view in QML ?
Forum Update on Monday, May 27th 2025

How can i create vertical tab view in QML ?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
6 Posts 4 Posters 6.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Q Offline
    Q Offline
    Qjay
    wrote on 14 Jul 2017, 16:53 last edited by
    #1

    hello i want to create vertical tabs view in which when user clicks it opens details regarding it and can go back too .

    for ex :
    tab1
    tab2
    tab3

    click on tab3 -> opens detail and can go back to

    how can i do it ?

    E 1 Reply Last reply 15 Jul 2017, 08:28
    0
    • Q Qjay
      14 Jul 2017, 16:53

      hello i want to create vertical tabs view in which when user clicks it opens details regarding it and can go back too .

      for ex :
      tab1
      tab2
      tab3

      click on tab3 -> opens detail and can go back to

      how can i do it ?

      E Offline
      E Offline
      Eeli K
      wrote on 15 Jul 2017, 08:28 last edited by
      #2

      @Qjay What do you mean by "go back"? In normal tab bar the buttons are visible all the time so you can always select another tab. If not, see the Quick Controls examples in Qt installation which have selectable and navigable vertical lists of views.

      A simple implementation in Controls 2 could use vertical ListView with Buttons as delegates. If you need more inspiration for a more complete implementation go to qml/QtQuick/Controls.2/ in your Qt installation and open TabBar.qml and TabButton.qml and see how they are implemented. I have done something similar in past but I hesitate to give the code because it's unnecessarily complicated, has more features than you would need and needs cleanup, so that it would probably be more work for you to understand it than to do it from scratch. If you really want I can give it. Or you can begin by yourself and ask for advice for details.

      1 Reply Last reply
      1
      • E Offline
        E Offline
        ekkescorner
        Qt Champions 2016
        wrote on 15 Jul 2017, 13:17 last edited by
        #3

        or use a non-closable Drawer from QtQuickControls2 https://doc.qt.io/qt-5/qtquickcontrols2-sidepanel-example.html

        ekke ... Qt Champion 2016 | 2024 ... mobile business apps
        5.15 --> 6.8 https://t1p.de/ekkeChecklist
        QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

        1 Reply Last reply
        0
        • N Offline
          N Offline
          Niconi
          wrote on 5 Nov 2017, 11:13 last edited by
          #4

          @ekkescorner said in How can i create vertical tab view in QML ?:

          QtQuickControls2

          I have similar question too, Is that approach similar like using default tab system?
          I see this in example project, I want to create side left panel tab
          here the example, i need it vertical (top to bottom)
          0_1509879298854_jp.PNG
          I need it like this :)
          Panel |
          Tab 1 |
          Tab 2 |
          Tab 3 | Tab 3 is selected, i need something like this with vertical tab and vertical text
          Tab 4 |
          Tab 5 |

          E 1 Reply Last reply 5 Nov 2017, 16:50
          0
          • N Niconi
            5 Nov 2017, 11:13

            @ekkescorner said in How can i create vertical tab view in QML ?:

            QtQuickControls2

            I have similar question too, Is that approach similar like using default tab system?
            I see this in example project, I want to create side left panel tab
            here the example, i need it vertical (top to bottom)
            0_1509879298854_jp.PNG
            I need it like this :)
            Panel |
            Tab 1 |
            Tab 2 |
            Tab 3 | Tab 3 is selected, i need something like this with vertical tab and vertical text
            Tab 4 |
            Tab 5 |

            E Offline
            E Offline
            ekkescorner
            Qt Champions 2016
            wrote on 5 Nov 2017, 16:50 last edited by
            #5

            @Niconi for vertical Tabs you need a Drawer

            ekke ... Qt Champion 2016 | 2024 ... mobile business apps
            5.15 --> 6.8 https://t1p.de/ekkeChecklist
            QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

            N 1 Reply Last reply 6 Nov 2017, 00:29
            0
            • E ekkescorner
              5 Nov 2017, 16:50

              @Niconi for vertical Tabs you need a Drawer

              N Offline
              N Offline
              Niconi
              wrote on 6 Nov 2017, 00:29 last edited by
              #6

              @ekkescorner thanks, but how to make it A non-interactive Drawer in landscape mode from begining? example file only make it non-interactive when the windows is in full screen (become landscape)
              in my case my window already in landscape mode from begining but it still become closable drawer

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved