NavigationItem

Base type for items inside Navigation More...

Import Statement: import VPlayApps 1.0
Inherits:

Tab

Properties

Signals

Detailed Description

NavigationItems are the base type for direct children of Navigation. They represent one entry in the used navigation type, a Tab inside a TabControl or a list entry in an AppDrawer, or both. The default behavior of Navigation is platform dependent, using AppDrawer on Android and TabControl on iOS.

A NavigationItem is directly derived from the Qt component Tab. It is defined by a title text, a icon and its content.

The content of a NavigationItem is a Component, and can be any QML Item put directly as child item inside NavigationItem.

Example Usage

NavigationItem should be used inside Navigation. Use the following code for a simple platform dependent navigation, where FirstPage and SecondPage are the content pages of your app.

 App {
   Navigation {
     NavigationItem {
       title: "First Page"
       icon: IconType.calculator

       //page without navigation stack - no sub pages
       FirstPage { }
     }

     NavigationItem {
       title: "Second Page"
       icon: IconType.list

       //page with sub page navigation
       NavigationStack {
         SecondPage { }
       }
     }
   }
 }

Property Documentation

badgeValue : string

An optional value that's displayed as badge if the navigationitem is shown as drawer menu.

The appearance of badge can be styled with Theme::navigationAppDrawer properties:

 import VPlayApps 1.0

 App {
   onInitTheme: {
     // Badge styling
     Theme.navigationAppDrawer.badgeFontSize = 12
     Theme.navigationAppDrawer.badgeTextColor = "white"
     Theme.navigationAppDrawer.badgeBackgroundColor = "grey"
     Theme.navigationAppDrawer.badgeRadius = 4
   }

   Navigation {
     NavigationItem {
       title: qsTr("News")
       badgeValue: "1"

       // ...
     }
   }
 }

This QML property was introduced in V-Play 2.16.1.


icon : string

Icon to be used inside the representation for this NavigationItem. 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 NavigationItem::iconComponent. If a custom component is specified, setting the icon has no effect.

See also iconFont and iconComponent.


iconComponent : Component

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

To set a custom icon, implement your own component for the NavigationItem. When instantiated, the component is parented to a container item that comes with three important properties:

  • The tabControl property is true when the icon is used for tabs, false when it is used inside the app drawer menu.
  • The navItem property holds a reference to the NavigationItem that uses the icon. It may be used to access other properties like the title.
  • The selected property states whether the NavigationItem that uses the icon is currently active.

The following example shows colored Rectangles for the icons of an app navigation.

 import QtQuick 2.4
 import VPlayApps 1.0

 App {
   // set up the custom icon component
   Component {
     id: iconComponent
     Rectangle {
       // we fill the parent (container item for the icon)
       anchors.fill: parent

       // if not selected, we use the defined Theme colors of the tab bar or app drawer
       property color offColor: parent.tabControl ? Theme.tabBar.titleOffColor : Theme.navigationAppDrawer.textColor

       // color the icon based on the title when it is selected
       color: parent.selected ? parent.navItem.title :  offColor
     }
   }

   Navigation {
     NavigationItem {
       title: "Red"
       iconComponent: iconComponent
       NavigationStack {
         Page { title: "Red Page" }
       }
     }

     NavigationItem {
       title: "Green"
       iconComponent: iconComponent
       NavigationStack {
         Page { title: "Green Page" }
       }
     }
   }
 }

This QML property was introduced in V-Play 2.8.2.

See also icon and iconFont.


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 NavigationItem::iconComponent. If a custom component is specified, setting the icon font has no effect.

This QML property was introduced in V-Play 2.8.2.

See also icon and iconComponent.


[read-only] listView : AppListView

Accessor an AppListView inside the content of this NavigationItem, if any.


Accessor property for the NavigationStack used for navigating to sub pages, if any.


[read-only] page : Page

Accessor property for the Page of the NavigationItem or the current main page if a NavigationStack is used.

Note: The content pages of navigation items are dynamically created and loaded at runtime. As long as the page has not been created, the page property remains null. During this time page properties like Page::title cannot be accessed, even if the page is correctly set up in your Navigation structure.


showInDrawer : bool

Whether this navigation item is included in the AppDrawer of the Navigation. The default value is true.

Setting this property to false hides the NavigationItem list entry in the drawer menu. It is still part of the tab navigation, or can be opened with custom app logic.

 Navigation {

   Component.onCompleted: currentIndex = 1 // open second nav item

   NavigationItem {
     title: qsTr("First")

     // ...
   }

   NavigationItem {
     title: qStr("Second")
     showInDrawer: false // do not show menu item in navigation drawer

     // ...
   }
 }

This QML property was introduced in V-Play 2.16.0.


showItem : bool

Whether the app Navigation should show this navigation item in the drawer and tab bar. The default value is true.

Setting this property to false completely removes the NavigationItem and its content from the app Navigation. This allows to dynamically make app features available. To only show a navigation item when a certain condition is met you can use property bindings. The following example hides the item on non-iOS devices:

 NavigationItem {
   title: "Only on iOS"
   icon: IconType.apple
   showItem: Theme.isIos

   // ...
 }

This QML property was introduced in V-Play 2.13.2.


Signal Documentation

selected()

Called when this NavigationItem is selected by the user, either from within TabControl or AppDrawer.


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