TabStrip Overview
The TabStrip displays a collection of tabs with associated content.
The tabs enable the user to switch between different views inside a single component.
The TabStrip wrapper for Vue is a client-side wrapper for the Kendo UI TabStrip widget.
Basic Usage
The following example demonstrates the TabStrip in action.
Example
View Source
Change Theme:
Functionality and Features
- Data binding
- Images
- Animation effects
- Tab position
- Scrollable tabs
- Loading content with AJAX
- Keyboard navigation
- RTL support
Events
The following example demonstrates basic TabStrip events. You can subscribe to all TabStrip events by the handler name.
<div id="vueapp" class="vue-app">
<kendo-tabstrip @select="onSelect">
<ul>
<li class="k-state-active">
Paris
</li>
<li>
New York
</li>
</ul>
<div>
<div>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<div>
<p>Sunny weather in New York.</p>
</div>
</div>
</kendo-tabstrip>
</div>Vue.use(LayoutInstaller);
new Vue({
el: '#vueapp',
methods: {
onSelect: function(e) {
console.log("Selected: " + $(e.item).find("> .k-link").text());
}
}
})