Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

AppTabBar

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

Import Statement: import Felgo 3.0
Since: Felgo 2.9.2

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 3.0
 import QtQuick.Controls 2.0 as QuickControls2
 import QtQuick 2.5

 Page {
   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.