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	Default
Items	complex	No
Position	`enum`	No
PreloadTabs	`number[]`	No
Styles	`object`	No
SwipeEnabled	`boolean`	No
TabStripType	`enum`	No	`"Normal"`
_Name	`string`	No
_Type	`const`	Yes

Items¶

type: complex

Items Value¶

Any following options needs to be fulfilled.

Option 1¶

List of tab items defined for the tab control.

Array type:

All items must be of the type:

TabItem

Option 2¶

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

Rule

Position¶

type: enum

The value of this property must be one of the known values listed 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 TabStrip.

type: object with following properties.

Property	Type	Required	Default
TabStrip	string	No
TabItemImage	string	No

TabStrip¶

The string value is a style class name of 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).

TabStrip style class

TabItemImage¶

The string value is a style class name for image in TabItem.

Image style class

SwipeEnabled¶

Enables swipe gesture to switch between tabs.

type: boolean

TabStripType¶

The tab strip types of the tabs.

type: enum
default: Normal

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

Value	Description
`Normal`	The default tab strip used in tabs.
`Segmented`	Use segment control as tab strip. All tabs will be shown on the page, it is not scrollable, and the tab text may possibly be truncated. It will use the full width of the screen, and each tab will be divided into equal portions based on the number of tabs. Image in tab item will be ignored. (iOS only, this property will be ignored for Android and web platforms, and Tabs appear as "Normal" type).

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"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"
    },
    {
      "_Name":"ControlsTab",
      "Caption":"Controls",
      "Image":"res://control_icon",
      "OnPress":"/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen":"/MDKDevApp/Pages/Examples/ControlExamples.page",
      "PageMetadata":{
        "_Type":"Page",
        "_Name":"PageMetadataObjectTest1",
        "Controls":[{
            "Sections":[{
              "ObjectCells":[{
                "ObjectCell":{
                  "AccessoryType":"disclosureIndicator",
                  "Description":"another pagemetadata",
                  "OnPress":"/MDKDevApp/Actions/Navigation/PageMetadataObject.action",
                  "Title":"Next Page"
                }
              }],
              "_Name":"NavigationActionSection1",
              "_Type":"Section.Type.ObjectTable"
            }],
            "_Type":"Control.Type.SectionedTable",
            "_Name":"NavigationActionSectionTable1"
        }]
      },
      "_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.

Tabs with font icon and style example¶

{
  "_Type": "Page",
  "_Name": "TabsStylesPage",
  "Caption": "Tabs Style Example",
  "Controls": [{
      "Items": [
        {
          "_Name": "ActionsTab",
          "Caption": "Actions",
          "Image": "sap-icon://settings",
          "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
          "PageToOpen": "/MDKDevApp/Pages/Examples/TabActionExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "ControlTab1",
          "Caption": "/MDKDevApp/Rules/ControlsCaption.js",
          "Image": "sap-icon://settings",
          "OnPress":"/MDKDevApp/Rules/TabControl/TabControlRule.js",
          "PageToOpen": "/MDKDevApp/Pages/Examples/ControlExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "ControlTab2",
          "Caption": "/MDKDevApp/Rules/ControlsCaption.js",
          "Image": "sap-icon://settings",
          "OnPress":"/MDKDevApp/Rules/TabControl/TabControlRule.js",
          "PageToOpen": "/MDKDevApp/Pages/Examples/ControlExamples.page",
          "_Type": "Control.Type.TabItem"
        }
      ],
      "Styles": {
        "TabStrip": "TabStripStyle",
        "TabItemImage": "font-icon-class"
      },
      "_Type": "Control.Type.Tabs",
      "_Name": "TabsStyleTest"
    }]
}

.TabStripStyle {
  background-color: #79d2a6;
  selected-item-color: red;
  un-selected-item-color: #cc6600;
  highlight-color: red;
}

/* Only font-size is supported */
.font-icon-class {
  font-size: 8;
}