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

Import Statement: import Felgo 3.0
Since: Felgo 2.9.2



Detailed Description

For a usage example, please see the AppTabBar documentation.

Property Documentation

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::tabIcon 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 tabIcon, iconFont, and showIcon.

iconFont : string

Specifies the icon font used to display the tabIcon. 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 tabIcon, 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 tabIcon. 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 tabIcon, iconFont, and iconComponent.

tabIcon : 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 tabIcon property is only used by the default AppTabButten::iconComponent. If a custom component is specified, setting the tabIcon 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.

This property was introduced in Felgo 2.15.0.

See also iconFont, iconComponent, and showIcon.

[read-only] tabPressed : bool

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

Signal Documentation


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
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support