BottomNavigation¶

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.

BottomNavigation is mainly used for top level navigation, treated as navigation menu, where the separate tabs don't have shared context. When the tab item is tapped, user is taken to the top level navigation destination associated with the tab item. BottomNavigation should be used when the top level destinations need to be accessible from anywhere in the app.

BottomNavigation can have up to 5 tab items.

The tab pages of the BottomNavigation 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.

BottomNavigation supports inner navigation (navigation on tab page level), outer navigation (navigation on parent page level by using NavigationAction.OuterNavigation flag). While the outer navigation is supported, it is recommended to use a full modal page display.

Toolbar control defined in Parent Page with BottomNavigation control would be ignored. BottomNavigation has nested Tabs support. It is not recommended to display BottomNavigation as nested control of BottomNavigation.

BottomNavigation Properties¶

Property	Type	Required
Items	TabItem	No
Styles	`object`	No
_Name	`string`	No
_Type	`const`	Yes

Items¶

List of tab items defined for the tab control.

type: TabItem[]

All array items must be of the type: TabItem

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 for TabStrip. A TabStrip style class has specific 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

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Control.Type.BottomNavigation"

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"
    }],
    "_Type": "Control.Type.BottomNavigation",
    "_Name": "BottomNavigationControl"
  }]
}

Font icon and style¶

{
  "_Type": "Page",
  "_Name": "BottomNavigationPage",
  "Caption": "Bottom Navigation",
  "Controls": [{
      "Items": [
        {
          "_Name": "ActionsTab",
          "Caption": "Actions",
          "Image": "sap-icon://settings",
          "PageToOpen": "/MDKDevApp/Pages/Examples/TabActionExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "ControlsTab",
          "Caption": "/MDKDevApp/Rules/ControlsCaption.js",
          "Image": "sap-icon://settings",
          "PageToOpen": "/MDKDevApp/Pages/Examples/ControlExamples.page",
          "_Type": "Control.Type.TabItem"
        },
        {
          "_Name": "OData",
          "Caption": "OData",
          "Image": "sap-icon://settings",
          "PageToOpen": "/MDKDevApp/Pages/Examples/ODataExamples.page",
          "_Type": "Control.Type.TabItem"
        }
      ],
      "Styles": {
        "TabStrip": "TabStripStyle",
        "TabItemImage": "font-icon-class"
      },
      "_Type": "Control.Type.BottomNavigation",
      "_Name": "BottomNavigationControl"
    }]
}

.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;
}