TabStrip Overview
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
The Hybrid UI 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 Hybrid UI TabStrip changes depending on the user mobile device and operating system.
Getting Started
The Kendo UI mobile Application automatically initializes the Hybrid UI TabStrip for every element with role data-attribute set to tabstrip and present in the views/layouts markup. Alternatively, the TabStrip 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.
Integration
The tabs of the TabStrip navigate to the mobile application's views. When the mobile application navigates to another view, it updates the currently selected tab of the TabStrip based on the URL of the current view.
Markup Initialization
The example below demonstrates how to initialize the Hybrid UI TabStrip based on the data-role attribute.
<div data-role="tabstrip">
<a href="#index">Home</a>
<a href="#featured">Featured</a>
</div>
Appearance
Tab Badges
Every tab can have a badge, which is set using the badge data-attribute of the Tab's a element.
The example below demonstrates how to set badges to tabs.
<div data-role="tabstrip">
<a data-badge="5" href="#index">Home</a>
<a data-badge="105" href="#featured">Featured</a>
</div>
Tab Icons
A tab icon can be set in two ways:
- By adding an
imgelement inside theaelement. - By setting a
data-iconattribute to theaelement.
The example below demonstrates how to use font icons with the data-icon attribute.
<div data-role="tabstrip">
<a data-icon="home" href="#index">Home</a>
<a data-icon="featured" href="#featured">Featured</a>
</div>
Kendo UI ships with several ready to use icons. The full list of predefined icons can be seen in the article on Hybrid UI font icons. It is possible for you to add more icons by defining the respective CSS tab class.
Important
For detailed information on how you can use custom icons, refer to the article on Hybrid UI font icons.
See Also
Articles and how-to examples on the Hybrid UI components: