[David]

 Hi,

is it possible, that the TabControl is flickable when the width of the “tab items” are longer than the screen width? 

For example:

    TabControl {

        id: tabControl

        Flickable{

            anchors.fill: parent

            NavigationItem {

                id: infoTab

                title: "Info"

                icon: IconType.infocircle

                Page1{}

            }

            NavigationItem {

                id:installationTab

                title: "Installation"

                icon: IconType.wrench

                Page2{}

            }

            NavigationItem {

                id:connectionTab

                title: "Connection"

                icon: IconType.compress

                Page3{}

            }

            NavigationItem {

                id:configurationTab

                title: "Configuration"

                icon: IconType.gears

                Page4{}

            }

        }

    }

[GüntherFelgo Team]

Hi David!

The TabControl extends the QML TabView. Unfortunately the TabView is not made for implementing flickable tabs, and only allows to change the look of the tabs.

A workaround would be to place the whole TabControl in a Flickable and use it to show the tabs only. You can then use a Loader component to manually show a different page based on the selected tab.

E.g.:

Page {
      title: qsTr("Main Page")

      // tabs
      Flickable {
        id: tabFlickable
        width: parent.width
        height: dp(Theme.tabBar.height)
        contentWidth: tabControl.width
        contentHeight: height

        TabControl {
          id: tabControl
          width: 600 // bigger tab control width

          NavigationItem {
            id: infoTab
            title: "Info"
            icon: IconType.infocircle
          }
          NavigationItem {
            id:installationTab
            title: "Installation"
            icon: IconType.wrench
          }
          NavigationItem {
            id:connectionTab
            title: "Connection"
            icon: IconType.compress
          }
          NavigationItem {
            id:configurationTab
            title: "Configuration"
            icon: IconType.gears
          }
        }
      }

      // content area
      Loader {
        id: content
        anchors.top: tabFlickable.bottom
        anchors.bottom: parent.bottom
        width: parent.width
        source: "Page"+tabControl.currentIndex+".qml" // load different page based on selected tab
      }
    }

 

 

Best,
Günther