All Components

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.

<div id="vueapp" class="vue-app row example-wrapper">
    <div class="row">
        <div class="col-xs-12 col-sm-6 example-col">
            <p>ColorPicker</p>
            <kendo-colorpicker v-model="color"></kendo-colorpicker>
            <p>MaskedTextBox</p>
            <kendo-maskedtextbox v-model="phoneNumber" mask="(999) 000-0000"></kendo-maskedtextbox>
            <p>NumericTextBox</p>
            <kendo-numerictextbox v-model.number="numeric"></kendo-numerictextbox>
        </div>
        <div class="col-xs-12 col-sm-6 example-col">
            <p>Slider</p>
            <kendo-slider v-model.number="numeric"
                          :min="10"
                          :max="40">
            </kendo-slider>
            <p>RangeSlider</p>
            <kendo-rangeslider :selection-start="start"
                               :selection-end="end"
                               :min="0"
                               :max="100">
            </kendo-rangeslider>
            <p>Switch</p>
            <kendo-switch></kendo-switch>
        </div>  
    </div>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: '#vueapp',
    data: {
        color: "#F00",
        phoneNumber: "",
        numeric: 17,
        start: 25,
        end: 75
    }
})

Installation

To initialize the Inputs, 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 Inputs package for Vue.

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

    The package also exports the following wrappers for individual components:

    • MaskedTextBox
    • NumericTextBox
    • ColorPicker
    • Slider
    • RangeSlider
    • Switch
  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 { 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
       }
    })
In this article