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.

The TabStrip-no- Component is part of Kendo UI for Vue, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the TabStrip in action.

View Source
Change Theme:

Functionality and Features


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">
            <li class="k-state-active">
                New York
                <p>Rainy weather in Paris.</p>
                <p>Sunny weather in New York.</p>

new Vue({
        el: '#vueapp',
        methods: {
            onSelect: function(e) {
                console.log("Selected: " + $(e.item).find("> .k-link").text());