All Components

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.

<div id="vueapp" class="vue-app">
    <kendo-tabstrip>
        <ul>
            <li class="k-state-active">
                One
            </li>
            <li>
                Two
            </li>
            <li>
                Three
            </li>
        </ul>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.</p>
        </div>
        <div>
            <p>Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.</p>
        </div>
        <div>
            <p>Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.</p>
        </div>
    </kendo-tabstrip>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: "#vueapp"
})

Features and Functionalities

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