Components / Layout

Layout Overview

The Layout components create a perceptive and intuitive layout of web projects to provide for an easier navigation.

ContextMenu

A component for displaying hierarchical data as a multi-level menu in a popup.
Menu

A component for displaying hierarchical data as a multi-level menu.
PanelBar

A multi-level component for hierarchical data.
Splitter

A component for resizable layouts.
TabStrip

A tab collection for associated content.

Basic Usage

The following example demonstrates how to initialize the ContextMenu, Menu, PanelBar, Splitter, and TabStrip.

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 example-col">
            <p>Menu</p>
            <kendo-menu>
                <kendo-menu-item text="Item1">
                    <kendo-menu-item text="SubItem1"></kendo-menu-item>
                    <kendo-menu-item text="SubItem2"></kendo-menu-item>
                    <kendo-menu-item text="SubItem3"></kendo-menu-item>
                </kendo-menu-item>
                <kendo-menu-item text="Item2">
                    <kendo-menu-item text="SubItem1"></kendo-menu-item>
                    <kendo-menu-item text="SubItem2"></kendo-menu-item>
                    <kendo-menu-item text="SubItem3"></kendo-menu-item>
                </kendo-menu-item>
            </kendo-menu>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 example-col">
            <p>Context Menu</p>
            <div id="target">Right click here</div>
            <kendo-contextmenu>
                <li>Item 1
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                    </ul>
                </li>
                <li>Item 2
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                    </ul>
                </li>
            </kendo-contextmenu>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 example-col">
            <p>PanelBar</p>
            <kendo-panelbar>
                <li>
                    Item 1
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                    </ul>
                </li>
                <li>
                    Item 2
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                    </ul>
                </li>
            </kendo-panelbar>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 example-col">
            <p>TabStrip</p>
            <kendo-tabstrip>
                <ul>
                    <li class="k-state-active">
                        Paris
                    </li>
                    <li>
                        New York
                    </li>
                    <li>
                        London
                    </li>
                    <li>
                        Moscow
                    </li>
                </ul>
                <div>
                    <div>
                        <h2>17<span>&ordm;C</span></h2>
                        <p>Rainy weather in Paris.</p>
                    </div>
                </div>
                <div>
                    <div>
                        <h2>29<span>&ordm;C</span></h2>
                        <p>Sunny weather in New York.</p>
                    </div>
                </div>
                <div>
                    <div>
                        <h2>21<span>&ordm;C</span></h2>
                        <p>Sunny weather in London.</p>
                    </div>
                </div>
                <div>
                    <div>
                        <h2>16<span>&ordm;C</span></h2>
                        <p>Cloudy weather in Moscow.</p>
                    </div>
                </div>
            </kendo-tabstrip>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 example-col">
            <p>Splitter</p>
            <kendo-splitter :orientation="'vertical'">
                <div>
                    <kendo-splitter  :orientation="'horizontal'">
                        <div>Top Left</div>
                        <div>Top right</div>
                    </kendo-splitter>
                </div>
                <div>Bottom</div>
            </kendo-splitter>
        </div>
    </div>
</div>
Vue.use(LayoutInstaller);
   new Vue({ el: '#vueapp' })

Installation

To initialize the Layout wrappers, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

  2. Install the Kendo UI Layout package for Vue.

    npm install --save @progress/kendo-layout-vue-wrapper

    The package also exports the following wrappers for individual components:

    • ContextMenu
    • Menu
    • PanelBar
    • Splitter
    • TabStrip

  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui' // This will import the entire Kendo UI library
// As an alternative, you could import only the scripts that are used by a specific widget:
// import '@progress/kendo-ui/js/kendo.menu' // Imports only the Menu script and its dependencies
// import '@progress/kendo-ui/js/kendo.panelbar' // Imports only the PanelBar script and its dependencies
// import '@progress/kendo-ui/js/kendo.splitter' // Imports only the Splitter script and its dependencies
// import '@progress/kendo-ui/js/kendo.tabstrip' // Imports only the TabStrip script and its dependencies

import '@progress/kendo-theme-default/dist/all.css'

import { ContextMenu } from '@progress/kendo-layout-vue-wrapper'
import { Menu } from '@progress/kendo-layout-vue-wrapper'
import { PanelBar } from '@progress/kendo-layout-vue-wrapper'
import { Splitter } from '@progress/kendo-layout-vue-wrapper'
import { TabStrip } from '@progress/kendo-layout-vue-wrapper'

Vue.use(LayoutInstaller)

new Vue({
   el: '#app',
   components: {
       ContextMenu,
        Menu,
        PanelBar,
        Splitter,
        TabStrip
   }
})

In this article