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.
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
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.
The example below demonstrates how to initialize the Hybrid UI TabStrip based on the
<div data-role="tabstrip"> <a href="#index">Home</a> <a href="#featured">Featured</a> </div>
Every tab can have a badge, which is set using the
badge data-attribute of the Tab's
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>
A tab icon can be set in two ways:
- By adding an
imgelement inside the
- By setting a
data-iconattribute to the
The example below demonstrates how to use font icons with the
<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.
For detailed information on how you can use custom icons, refer to the article on Hybrid UI font icons.
Articles and how-to examples on the Hybrid UI components: