AppTabButton

Specifies the component for displaying the tab icon. If no custom component is set, the AppTabButton creates an AppIcon 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.

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

See also tabIcon, iconComponent, and showIcon.

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

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.

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.

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.