Important

This documentation is deprecated, and only kept here to support users of browser extension APIs. If you are using Trigger.io for iOS or Android, see https://trigger.io/docs/.

tabbar: Native tab bar

The tabbar module shows a fixed footer as part of your app which can show multiple "tab" buttons, these buttons can be selected by the user or activated by Javascript.

To get an idea of how these footers can look, see our blog post, How to build hybrid mobile apps combining native UI components with HTML5.

Config

The tabbar module must be enabled in config.json as follows:

{
    "modules": {
        "tabbar": true
    }
}

API

show

Platforms: Mobile

Shows the tabbar. The tabbar is shown by default and will only be hidden if you call tabbar.hide().

tabbar.show(success, error)

Arguments:

• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

hide

Platforms: Mobile

Hides the tabbar.

tabbar.hide(success, error)

Arguments:

• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

setTint

Platforms: Mobile

Set a colour to tint the tabbar with, in effect the tabbar will become this colour with a gradient effect applied.

tabbar.setTint(color, success, error)

Arguments:

• color (array) -- an array of four integers in the range [0,255] that make up the RGBA color of the badge. For example, opaque red is [255, 0, 0, 255].
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

setActiveTint

Platforms: Mobile

Set a colour to tint active tabbar item with.

tabbar.setActiveTint(color, success, error)

Arguments:

• color (array) -- an array of four integers in the range [0,255] that make up the RGBA color of the badge. For example, opaque red is [255, 0, 0, 255].
• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

addButton

Platforms: Mobile

Add a button with an icon and text to the tabbar. The first parameter is an object of options for the button, which can include:

• icon (required): This sets the icon which will be shown on the tab, only the alpha channel of the icon will be used with the color being replaced for a consistent style. You can use a file object as returned by something like forge.file.saveURL, or a string path relative to the src directory, e.g. "img/button.png".
• text (required): This sets the text which will appear below the icon on the tab.
• index (recommended): This sets the order of the button to be added, not setting this will result in the order of the tabs not being fixed.

When adding a button the success callback will be called with a button object. This object has methods to allow you to interact with the button as follows:

• button.remove(success, error): Remove the button
• button.setActive(success, error): Mark the button as selected, without calling this and before the user clicks on one of the buttons no button will be marked active.
• button.onPressed.addListener(callback, error): Add a callback to handle when the button is pressed

Example:

forge.tabbar.addButton({
  icon: "search.png",
  text: "Search",
  index: 0
}, function (button) {
  button.setActive();
  button.onPressed.addListener(function () {
    alert("Search");
  });
});

tabbar.addButton(params, success, error)

Arguments:

• params (object) -- Button options, must contain an icon, text and optionally index
• success (function(button)) -- called with the button object.
• error (function(content)) -- called with details of any error which may occur

removeButtons

Platforms: Mobile

Remove all buttons from the tabbar.

tabbar.removeButtons(success, error)

Arguments:

• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur

setInactive

Platforms: Mobile

Unselect any currently active tab, leaving the tabbar with no tabs selected.

tabbar.setInactive(success, error)

Arguments:

• success (function()) -- callback to be invoked when no errors occur
• error (function(content)) -- called with details of any error which may occur