Native Components / Dropdowns

Floating Labels

Floating labels are part of the Material Design Guidelines and are fully supported by the KendoVue Dropdowns components.

Basic Usage

To enable the floating label functionality, pass a label property to the DropDownList component.

The following example demonstrates how to implement floating labels in the Dropdowns and style them with the KendoVue Material theme.

<div id="vueapp" class="vue-app">
        <div class="row">
                <div class="m-3">
                    <p>DropDownList</p>
                    <dropdownlist 
                        :label="'Product'" 
                        :data-items="dataProducts" 
                        :text-field="'productName'" 
                        :value-field="'productId'" 
                    >
                    </dropdownlist>
                </div>
        </div>
</div>
import { DropDownList } from '@progress/kendo-vue-dropdowns';
Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            dataProducts: [
                { productName: "Chai", productId: 1, categoryId: 1 },
                { productName: "Chang", productId: 2, categoryId: 1 },
                { productName: "Aniseed Syrup", productId: 3, categoryId: 2 },
                { productName: "Genen Shouyu", productId: 4, categoryId: 2 },
                { productName: "Ikura", productId: 5, categoryId: 3 }
            ]
        };
    }
});

In this article