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
Edit In Stackblitz  
Change Theme:

Functionality and Features

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());
            }
        }
    })

In this article

Not finding the help you need?