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 complex Optional
Position enum Optional
PreloadTabs number[] Optional
Styles object Optional
_Name string Optional
_Type const Required

Items

  • type: complex

Items Value

Any following options needs to be fulfilled.

Option 1

Option 2

Return result in TabItemArray format. Rule will not be triggered again during Tabs redraw.


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

PreloadTabs

Array of tab indices which needs to be preloaded. Tab indexes starts from 0. Specifying [-1] will preload all the tabs. User can also use a rule to specify tabs that needs to be preloaded.

  • type: number[]

All items must be of the type: number


Styles

Set styles for TabStrp.

  • type: object with following properties.
Property Type Required Default
TabStrip string Optional

TabStrip

The string value is a style class name for TabStrip.TabStrip style has specific CSS properties such as selected-item-color (for active tab item), un-selected-item-color (for inactive tab items) and highlight-color (for highlight line of active tab item on Tabs only).


_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://",
      "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",
    "PreloadTabs": [2,4],
    "_Type": "Control.Type.Tabs",
    "_Name": "TabsControl"
  }]
}

Preload Tabs

if user wants to preload tabs in background, PreloadTabs property needs to be specified. by default we need to select a tab in order to load it.

"PreloadTabs": [-1]  // this will load all the tabs.
"PreloadTabs": [2,5] // this will load tabs based on indices.
"PreloadTabs": [-1,2,5] // all tabs will not be loaded only the selective ones will be loaded.
"PreloadTabs": [2,2,2] // Tab 2 will only be loaded once not thrice.