Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

AppTabBar

A tab bar with Theme-based iOS and Android styles. More...

Import Statement: import Felgo 4.0
Since: Felgo 2.9.2
Inherits:

TabBar

Properties

Detailed Description

The AppTabBar extends the QML Quick Controls 2 TabBar with a Theme-based style for iOS and Android. It only handles the tab visualization and can be combined with any other item to display the actual tab content.

iOS Android

Example Usage

The following example creates a page with an AppTabBar that shows two AppTabButtons. A SwipeView is used to display the content, which also allows swiping the content view to switch tabs.

 import Felgo
 import QtQuick.Controls as QuickControls2
 import QtQuick

 AppPage {
   title: "Tabs"

   // tabs
   AppTabBar {
     id: appTabBar
     contentContainer: swipeView

     AppTabButton {
       text: "Red"
     }
     AppTabButton {
       text: "Green"
     }
   }

   // tab contents
   QuickControls2.SwipeView {
     id: swipeView
     anchors.top: appTabBar.bottom
     anchors.bottom: parent.bottom
     width: parent.width
     clip: true

     Rectangle {
       color: "Red"
     }

     Rectangle {
       color: "Green"
     }

   }
 } // Page

Note: As some Qt Quick Controls 2 types collide with Felgo Apps type names, please use a dedicated identifier for the Quick Controls, as shown in the example above. This helps to avoid problems due to type-name collisions or mix-ups.

Property Documentation

contentContainer : Item

Specify the contentContainer to link the currentIndex properties of the contentContainer and the AppTabBar. For example, if you use a SwipeView for your content and specify it as the contentContainer, the currently active tab will change when you switch the content by swiping and vice-verca.


showIcon : bool

Whether the tabs should show the specified AppTabButton::tabIcon. The default value is false.


translucency : real

Allows to set a translucent background for the tab bar. Set a value between [0, 1] to specify the translucency. The default value is 0.


Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded