Dropdown
Dropdown component allows user to choose an option from the provided options.
# Playground
#Basic Usage
You can use the LvDropdown with some basic and complex use cases.You can use v-model for two way binding and updating value.You can get the selected value as a model value. LightVue dropdown is Both compatible with Vue 2.x and Vue 3.x
#Disabled
You can disable the dropdown by setting disabled prop true
#Editable Input
You can use the editable input for dropdown by setting editable Prop true
#Search
You can also insert the search input inside the dropdown for filtering the result by setting filter true
#Help Text
You can add a help text to an dropdown by passing a string into help-text prop
#Set Height
You can set the scroll height of the dropdown by passing height to scrollHeight prop.the dropdown will be scrollable
#Floating Label
You can add floating label to the dropdown by setting floating-label prop true
#Rounded
You can use the rounded variation of the dropdown by setting rounded prop true
#Material
You can add the animated bottom bar to the the dropdown by setting bottom-bar prop true
#Custom icons
You can also custmize the right and left icons by passing them into iconLeft & iconRight props respectively
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvDropdown from 'lightvue/dropdown';
// Register the component locally
export default {
components: {
LvDropdown
}
}// Register the component globally (Vue 2.x)
Vue.component('LvDropdown', LvDropdown);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvDropdown', LvDropdown);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: