The mobile TabStrip widget is used inside a mobile view or layout footer element to display an application-wide group of navigation buttons. The look of the mobile TabStrip changes depending on the user mobile device and operating system.

Getting Started

The Kendo mobile Application will automatically initialize the mobile TabStrip for every element with role data attribute set to tabstrip present in the views/layouts markup. Alternatively, it can be initialized using jQuery plugin syntax in the mobile View/Layout init event handler. The tabstrip element should contain one or more a elements.

Kendo Mobile Application Integration

The tabs of the TabStrip navigate to the mobile application's views. When the mobile application navigates to another view, it updates the TabStrip's currently selected tab, based on the current view's URL.

<div data-role="tabstrip">
  <a href="#index">Home</a>
  <a href="#featured">Featured</a>
</div>

Tab icons

A tab icon can be set in two ways - either by adding an img element inside the a element, or by setting an icon data attribute to the a element. Kendo mobile TabStrip ships with several ready to use icons:

• about
• action
• add
• bookmarks
• camera
• cart
• compose
• contacts
• details
• downloads
• fastforward
• favorites
• featured
• toprated
• globe
• history
• home
• info
• more
• mostrecent
• mostviewed
• organize
• pause
• play
• recents
• refresh
• reply
• rewind
• search
• settings
• share
• stop
• trash

Additional icons may be added by defining the respective CSS tab class.

Creating Custom Icons

In order to create colorizable icons like the default ones in Kendo UI Mobile, specify the icon image as a box mask (either as dataURI or as a separate image). The image should be PNG8 or PNG24 with alpha channel (PNG8+Alpha is supported by only few graphic editors, so better stick with PNG24). The image color is not important - it will be used as a mask only.

Note: BlackBerry 7.0 has a bug that renders its masks as background-image, so it is recommended to use white in order to support it. The bug is fixed in 7.1.

<style>
.km-custom {
  -webkit-mask-box-image: url("foo.png");
}
</style>

<div data-role="tabstrip">
  <a href="#index" data-icon="custom">Home</a>
</div>