AppTabButton

A tab button to be used with AppTabBar for Theme-based iOS and Android styled tabs. More...

Import Statement: import VPlayApps 1.0
Since: V-Play 2.9.2

Properties

Signals

Detailed Description

For a usage example, please see the AppTabBar documentation.

Property Documentation

icon : string

The icon to be displayed within the tab (one of the IconType constants).

To see a categorized view of all available icons with interactive search, see here. You may also use the iconFont property to set a custom icon font.

Note: The icon property is only used by the default AppTabButten::iconComponent. If a custom component is specified, setting the icon has no effect.

The icon will only be visible if showIcon is set to true. If no icon should be used for a tab, please make sure that showIcon is set to false.

See also iconFont, iconComponent, and showIcon.


iconComponent : Component

Specifies the component for displaying the tab icon. If no custom component is set, the AppTabButton creates an Icon to show the AppTabButton::icon of the AppTabButton::iconFont.

To set a custom icon, implement your own component for the AppTabButton. When instantiated, the component is parented to a container item which holds the property selected. Use this property to determine whether the AppTabButton that uses the icon is currently active.

The icon will only be visible if showIcon is set to true.

The following example uses colored Rectangles as the tab icons:

 AppTabBar {
   id: appTabBar
   contentContainer: swipeView
   showIcon: true

   // we use a custom colored rectangle as the tab icon
   Component {
     id: colorRectangleIcon
     Rectangle {
       property string tabText: parent && parent.tabButton && parent.tabButton.text || ""
       anchors.centerIn: parent
       width: dp(Theme.tabBar.iconSize)
       height: width
       color: parent.selected ? tabText.toLowerCase() : Theme.tabBar.subTabTitleOffColor
     }
   }

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

See also icon, iconFont, and showIcon.


iconFont : string

Specifies the icon font used to display the tab icon. If no font is set, the default icon font is used.

Note: This property is only used by the default AppTabButten::iconComponent. If a custom component is specified, setting the icon font has no effect.

See also icon, iconComponent, and showIcon.


[read-only] selected : bool

Whether the tab is currently selected. This property is set to true whenever this tab's index matches the AppTabBar::currentIndex.


showIcon : bool

Whether the tab should show the specified icon. Matches the parent AppTabBar::showIcon setting by default. If no icon should be displayed, please make sure this property is set to false.

See also icon, iconFont, and iconComponent.


[read-only] tabPressed : bool

Whether the tab is currently being pressed. Use this property instead of the default AbstractButton::pressed property.


Signal Documentation

pressed()

This signal is fired whenever the AppTabButton is pressed.


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