Navigation

A navigation control for using platform-specific navigation modes More...

Import Statement: import VPlayApps 1.0
Inherits:

Item

Properties

Methods

Detailed Description

The Navigation can be used to automatically use different navigation modes depending on the used platform. It supports navigation by TabControl on top or on bottom of the screen, by AppDrawer, or both.

By default TabControl is used on iOS and AppDrawer with an AppListView as content item on Android. You can change the styling of the AppDrawer's AppListView by overriding values from Theme::navigationAppDrawer.

Note: Navigation uses a lazy-loading mechanism for the contents of each NavigationItem element. This means, that the items within a NavigationItem are created when it is selected for the first time.

Example Usage

The following code from the widget showcase app demonstrates how easy it is to add platform-specific navigation to your app:

 App {
   Navigation {
     NavigationItem {
       id: widgetsItem
       title: "Widgets"
       icon: IconType.calculator

       WidgetsPage { title: widgetsItem.title }
     }

     NavigationItem {
       title: "Simple List"
       icon: IconType.list

       NavigationStack { //this tab/navigation item uses stack-based sub-navigation
         splitView: tablet
         SimpleListPage { }
       }
     }

     NavigationItem {
       title: "Sub-Tabs"
       icon: IconType.tablet

       SubTabsPage { }
     }

     NavigationItem {
       title: "Sub-Drawer"
       icon: IconType.chevroncircleright

       SubDrawerPage { }
     }

     NavigationItem {
       title: "Dialogs"
       icon: IconType.square

       DialogsPage { }
     }
   }
 }

Property Documentation

[read-only] count : int

Holds the number of NavigationItems.


currentIndex : int

Gets or sets the index of the currently visible NavigationItem.


[read-only] currentNavigationItem : NavigationItem

Holds the currently visible NavigationItem. To change it, currentIndex property can be changed.


drawer : AppDrawer

The AppDrawer object, which is used if drawer navigation is enabled.


[read-only] drawerVisible : bool

Holds true, if AppDrawer is used for navigation. Change by changing the navigationMode property.


footerView : Component

Component for an Item to appear in the AppDrawer, below the NavigationItem entries.


headerView : Component

Component for an Item to appear in the AppDrawer, above the NavigationItem entries. Per default, this is an invisible item that adds as a padding for the device status bar.


This property defines an item that is shown to toggle the navigation drawer state of the Navigation's AppDrawer item.

By default a toggle Icon is provided, which is sufficient in most cases. If you want to customize that icon you can make use of navigationDrawerItemPressed property to define a custom style for the pressed state.

Here is an example of providing your custom item:

 Navigation {
  id: navigation

   navigationDrawerItem: Text {
     text: "Open"
     anchors.centerIn: parent
     color: navigation.navigationDrawerItemPressed ? "red" : "green"
   }
 }

See also navigationDrawerItemPressed.


Use this readonly property to customize the pressed state of a custom provided navigationDrawerItem.

See also navigationDrawerItem.


Possible values are:

  • navigationModeDefault: Platform-specific default value (drawer for Android, tabs everywhere else)
  • navigationModeTabs: Use only TabControl
  • navigationModeDrawer: Use only AppDrawer
  • navigationModeTabsAndDrawer: Use TabControl and AppDrawer at the same time
  • navigationModeNone: Completely hide the Navigation. No TabControl or AppDrawer will be visible.

tabPosition : alias


[read-only] tabsVisible : bool

Holds true, if TabControl is used for navigation. Change by changing the navigationMode property.


Method Documentation

NavigationItem addNavigationItem(Component component)

Add a new NavigationItem at the end. The component should be a Component instantiating a NavigationItem.

Returns the created NavigationItem object.


NavigationItem getNavigationItem(int index)

Returns the NavigationItem at the specified index.


NavigationItem insertNavigationItem(int index, Component component)

Add a new NavigationItem at the specified index. The component should be a Component instantiating a NavigationItem.

Returns the created NavigationItem object.


void moveNavigationItem(int from, int to)

Move the NavigationItem at the specified index from to the index to.


void removeNavigationItem(int index)

Remove the NavigationItem at the specified index.


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