Inputs Overview

The Inputs are fields which allow for an input of data, based on a specific and predefined format.

Basic Usage

The following example demonstrates how to initialize the ColorPicker, MaskedTextBox, NumericTextBox, RangeSlider, Slider, and Switch.

Installation

To initialize the Inputs, 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

1. Install the Kendo UI Inputs package for Vue.

Copy Codenpm install --save @progress/kendo-inputs-vue-wrapper

The package also exports the following wrappers for individual components:

Copy Code* MaskedTextBox
* NumericTextBox
* ColorPicker
* Slider
* RangeSlider
* Switch

1. 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.maskedtextbox' // Imports only the MaskedTextBox script and its dependencies
   // import '@progress/kendo-ui/js/kendo.numerictextbox' // Imports only the NumericTextBox script and its dependencies
   // import '@progress/kendo-ui/js/kendo.colorpicker' // Imports only the ColorPicker script and its dependencies
   // import '@progress/kendo-ui/js/kendo.slider' // Imports only the Slider script and its dependencies
   // import '@progress/kendo-ui/js/kendo.switch' // Imports only the Switch script and its dependencies
   
   import '@progress/kendo-theme-default/dist/all.css'
   
   import { MaskedTextBox,
            NumericTextBox,
            ColorPicker,
            Slider,
            RangeSlider,
            Switch,
            InputsInstaller } from '@progress/kendo-inputs-vue-wrapper'
   
   Vue.use(InputsInstaller)
   
   new Vue({
       el: '#app',
       components: {
           MaskedTextBox,
           NumericTextBox,
           ColorPicker,
           Slider,
           RangeSlider,
           Switch
       }
   })

Suggested Links

• Get Started with the ColorPicker
• Get Started with the MaskedTextBox
• Get Started with the NumericTextBox
• Get Started with the RangeSlider
• Get Started with the Slider
• Get Started with the Switch