All Components

Inputs Overview

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

Installation

To initialize the Inputs, either:

Initializing from CDN

The following example demonstrates how to initialize the ColorPicker, MaskedTextBox, NumericTextBox, RangeSlider, Slider, and Switch components by using the CDN services. To access all CDN references, open the sample in Plunker.

<div id="vueapp" class="vue-app">

  <div class="col-xs-12 col-sm-6 example-col" style="width:38%">
    <p>MaskedTextBox</p>
    <kendo-maskedtextbox title="phone number"
                         :value="'555 123 4567'"
                         :mask="'(999) 000-0000'">
    </kendo-maskedtextbox>
  </div>

  <div class="col-xs-12 col-sm-6 example-col" style="width:38%">
    <p>NumericTextBox</p>
    <kendo-numerictextbox type="number"
                          title="currency"
                          :value="30"
                          :min="0"
                          :max="100"
                          :format="'c'"
                          :decimals="3">
    </kendo-numerictextbox>
  </div>

  <div class="col-xs-12 col-sm-6 example-col" style="width:20%">
    <p>ColorPicker</p>
    <kendo-colorpicker :value="'#ffffff'" :buttons="false"></kendo-colorpicker>
  </div>

  <div class="col-xs-12 col-sm-6 example-col" style="width:38%">
    <p>Slider</p>
    <kendo-slider :value="10" title="eqSlider1"></kendo-slider>
  </div>

  <div class="col-xs-12 col-sm-6 example-col" style="width:38%">
    <p>RangeSlider</p>
    <kendo-rangeslider title="rangeslider"
                       :selection-start="15"
                       :selection-end="45"
                       :min="0"
                       :max="100"
                       :large-step="10"
                       :small-step="5">
    </kendo-rangeslider>
  </div>

  <div class="col-xs-12 col-sm-6 example-col" style="width:20%">
    <p>Switch</p>
    <kendo-switch type="checkbox" :checked="true"></kendo-switch>
  </div>
</div>
Vue.use(InputsInstaller);

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

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

    The package also exports the following wrappers for individual components:

    * ColorPicker
    * MaskedTextBox
    * NumericTextBox
    * RangeSlider
    * Slider
    * 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 } from '@progress/kendo-inputs-vue-wrapper'
    import { NumericTextBox } from '@progress/kendo-inputs-vue-wrapper'
    import { ColorPicker } from '@progress/kendo-inputs-vue-wrapper'
    import { Slider } from '@progress/kendo-inputs-vue-wrapper'
    import { RangeSlider } from '@progress/kendo-inputs-vue-wrapper'
    import { Switch } from '@progress/kendo-inputs-vue-wrapper'
    import { InputsInstaller } from '@progress/kendo-inputs-vue-wrapper'
    
    Vue.use(InputsInstaller)
    
    new Vue({
        el: '#app',
        components: {
            MaskedTextBox,
            NumericTextBox,
            ColorPicker,
            Slider,
            RangeSlider,
            Switch
        }
    })
In this article