Skip to content

Tabs

This control renders a list of tab items along with content for each tab.

The control will always render as a full screen control taking over the entire space of the page.

Tabs is mainly used for organizing or allow navigation between group of content that are related and at the same level of hierarchy. Each tab page should contain content that is distinct from other tab pages in a set. Tabs is used to create sort of pager to browse between items that have the same context.

Tabs can support unlimited tab items. Tabs supports positioning of the tab bar (Top/Bottom), and Swipe gesture to switch between tab pages.

The tab pages of the Tabs would preserve its last state once the tab page is loaded, so that when user switch to another tab item and switch back to the previous tab item, they return to the last screen viewed.

Tabs does not support inner navigation (navigation on tab page level), any navigation action triggered from the tab page content would result in a navigation on the parent page level or similar to outer navigation on BottomNavigation.

Parent Page with Tabs may have Toolbar control defined on the same page. Tabs has nested Tabs support. It is not recommended to display BottomNavigation as nested control of Tabs.

Tabs Properties

Property Type Required
Items TabItem Optional
Position enum Optional
Styles TabStripStyle Optional
_Name string Optional
_Type const Required

Items

List of tab items defined for the tab control.

  • type: TabItem[]

All array items must be of the type: TabItem

Position

  • type: enum

The value of this property must be equal to one of the known values below.

Position Known Values

Value Description
Top
Bottom

Styles

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.Tabs"

Examples

{
  "_Type": "Page",
  "Controls": [{
    "Items": [{
      "_Name": "ActionsTab",
      "Caption": "Actions",
      "Image": "res://action_icon",
      "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/ActionExamples.page",
      "_Type": "Control.Type.TabItem"
    },
    {
      "_Name": "ControlsTab",
      "Caption": "Controls",
      "Image": "res://control_icon",
      "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/ControlExamples.page",
      "ResetIfPressedWhenActive": true,
      "_Type": "Control.Type.TabItem"
    }],
    "Position": "/MDKDevApp/Rules/AlwaysTop.js",
    "_Type": "Control.Type.Tabs",
    "_Name": "TabsControl"
  }]
}