Layout Overview

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

Basic Usage

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

Installation

To initialize the Layout wrappers, either:

• Use the CDN service, or
• Use Webpack.

Initializing with Webpack

1. Install Kendo UI and add a theme.

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

2. Install the Kendo UI Layout package for Vue.

   Copy Codenpm 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.

   Copy Codeimport '@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
       }
   })

Suggested Links

• Get Started with the ContextMenu
• Get Started with the Menu
• Get Started with the PanelBar
• Get Started with the Splitter
• Get Started with the TabStrip