Tab bar

The tab bar is a special bar anchored to the bottom of your app views that allows easy access to the main views of your application. The Supersonic tab bar is implemented in native code, so it is always situated below your view's HTML content and will not interfere with or be influenced by the positioning of the plain HTML elements.

Each tab maintains it's own layer stack, so all views and their contents (including the navigation bar) are separate from other tabs. To learn more about how navigation works, please see the Navigation guide.

Defining tabs

Tabs usually exist for the duration of the app's lifecycle and are relatively static in functionality, so it makes sense to define them before startup. Tabs can be defined in /config/structure.coffee with a special tabs array. The tab definition supports three properties: title, id and location:

  tabs: [
    {
      title: "Index"
      id: "index"
      location: "example#getting-started"
    }
  ]

The title property is the name of the tab, displayed in the tab bar. Setting an id allows you to reference a specific tab by it's id when setting custom styles for the tab. Note that the tab icons are defined in native CSS, so the id property is relevant for that use case.

The location property determines where your tab points to, and supports two kinds of syntax. In a default Supersonic app the syntax <module-name>#<view-name> works. In the above code example the defined tab will render the contents of the getting-started.html page in the example module. You can also use direct urls

  tabs: [
    {
      title: "Index"
      id: "index"
      location: "http://localhost/app/example/getting-started.html"
    }
  ]

Styling with CSS

Both the tab bar and any tab items can be styled with CSS using the generic native CSS selectors tab-bar and tab-bar-item. You can also set style classes and ids for the tab bar as a whole, as well as use the tab ids defined in /config/structure.coffee to style specific tab items. You can read more about native styling for the tab bar in the styling tab bar guide.

Programmatic APIs

Although tabs are relatively static throughout an app's lifecycle, Supersonic provides a variety of APIs for modifying tabs on the fly, including the possibiliy to show, hide and replace the tab bar entirely. The full list of available APIs is below.

API Reference: supersonic.ui.tabs.show()

Shows the tab bar

Example usage

supersonic.ui.tabs.show();
supersonic.ui.tabs.show()

Returns

supersonic.ui.tabs.show: (
) => Promise

A Promise that is resolved when the tab bar has been shown. If tab bar could not be shown, the promise will be rejected.

Also supports callbacks.

API Reference: supersonic.ui.tabs.hide()

Hides the tab bar

Example usage

supersonic.ui.tabs.hide();
supersonic.ui.tabs.hide()

Returns

supersonic.ui.tabs.hide: (
) => Promise

A Promise that is resolved when the tab bar has been hidden. If tab bar could not be hidden, the promise will be rejected.

Also supports callbacks.

API Reference: supersonic.ui.tabs.update()

Updates the tab bar

Example usage

supersonic.ui.tabs.update([{title: "Hello", badge: "1"}]);
supersonic.ui.tabs.update [{title: "Hello", badge: "1"}]

Parameters

supersonic.ui.tabs.update: (
 tabsArray: Array
) => Promise
Name Type Default Details
tabsArray Array<Object>

An array of tab configurations: {title: "Hello", badge: "1"}

Returns

A Promise that is resolved when the tab bar has been updated. If tab bar could not be updated, the promise will be rejected.

Also supports callbacks.

API Reference: supersonic.ui.tabs.replace()

Replaces the tab bar

Example usage

supersonic.ui.tabs.replace([{title: "Web", location: "http://www.google.com"}]);
supersonic.ui.tabs.replace [{title: "Web", location: "http://www.google.com"}]

Parameters

supersonic.ui.tabs.replace: (
 tabsArray: Array
) => Promise
Name Type Default Details
tabsArray Array<Object>

An array of tab configurations: {title: "Hello", badge: "1", location: "myroute#index"}

Returns

A Promise that is resolved when the tab bar has been replaced. If tab bar could not be replaced, the promise will be rejected.

Also supports callbacks.

API Reference: supersonic.ui.tabs.select()

Selects the tab bar

Example usage

supersonic.ui.tabs.select(1);
supersonic.ui.tabs.select 1

Parameters

supersonic.ui.tabs.select: (
 tabIndex: Integer
) => Promise
Name Type Default Details
tabIndex Integer

An index number of the tab to select. First tab from the left is 0, second one is 1 and so on.

Returns

A Promise that is resolved when the tab bar has been selected. If tab bar could not be selected, the promise will be rejected.

Also supports callbacks.

API Reference: supersonic.ui.tabs.updateCurrentTab()

Selects the tab bar

Example usage

supersonic.ui.tabs.updateCurrentTab({title: "Hello"});
supersonic.ui.tabs.updateCurrentTab {title: "Hello"}

Parameters

supersonic.ui.tabs.updateCurrentTab: (
 config: Object
) => Promise
Name Type Default Details
config Object

An tab configuration object.

Returns

A Promise that is resolved when the current tab has been updated. If tab could not be updated, the promise will be rejected.

Also supports callbacks.

API Reference: .()

API Reference: .()

API Reference: supersonic.ui.tabs.setStyleId()

Adds a CSS style id for the native tab bar.

Example usage

supersonic.ui.tabs.setStyleId("graybg");
supersonic.ui.tabs.setStyleId "graybg"

Parameters

supersonic.ui.tabs.setStyleId: (
 id: String
) => Promise
Name Type Default Details
id String

Id of the class to set for tab bar.

Returns

A Promise that is resolved once the new style id has been set. If id could not be set, the promise will be rejected.

Also supports callbacks.