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¶

type: TabStripStyle

_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": "RulesTab",
      "Caption": "Rules",
      "Image": "font://&#xe05a;",
      "OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action')",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/TabActionExamples.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"
  }]
}