Skip to content

Files

Latest commit

 

History

History
80 lines (53 loc) · 2.7 KB

index.md

File metadata and controls

80 lines (53 loc) · 2.7 KB
title page_title description slug canonicalLink position
Overview
ScrollView Overview - Components - Kendo UI for Vue
Get an overview of the features the Kendo UI ScrollView wrapper for Vue delivers and use the component in Vue projects.
overview_scrollview_wrapper
0

ScrollView Overview

The ScrollView displays a horizontal collection of content or image views with built-in navigation between them.

It can be scrolled through dragging, applying gestures, arrow clicking, page clicking, or tapping.

The ScrollView wrapper for Vue is a client-side wrapper for the Kendo UI ScrollView widget.

Basic Usage

The following example demonstrates how to initialize the ScrollView.

{% meta height:460 %} {% embed_file overview/basic-usage/main.vue preview %} {% embed_file overview/basic-usage/main.js %} {% endmeta %}

Installation

To initialize the ScrollView, either:

  • [Use the CDN service]({% slug using_cdn %}), or
  • Use Webpack.

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 ScrollView package for Vue.

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

  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.scrollview' // Imports only the ScrollView script and its dependencies

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

import { ScrollView, ScrollViewInstaller } from '@progress/kendo-scrollview-vue-wrapper'

Vue.use(ScrollViewInstaller)

new Vue({
	el: '#app',
	components: {
		ScrollView
	}
})
```

Events

The following example demonstrates basic ScrollView events. You can subscribe to all events of the ScrollView by the handler name.

Suggested Links