AppTabBar

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

Import Statement: import VPlayApps 1.0
Since: V-Play 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 VPlayApps 1.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 V-Play 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::icon. 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.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support