All Components
Components

Components / Layout

Layout Overview

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

Context Menu

Displays 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.

Installation

To initialize the Layouts, either:

Initializing from CDN

The following example demonstrates how to initialize the Context Menu, Menu, PanelBar, Splitter, and TabStrip components by using the CDN services. To access all CDN references, open the sample in Plunker.

<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' })

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'
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