vue-drop-down-searcher
Customisable dropdown select for Vue
🔺 Whats New
- Customizable selected dropdown color added
- Customizable tag color added
Features
- Configurable via props
- Plugin is supportable for mouse outside click
- Auto position
- Small bundle size
Installation
npm i vue-drop-down-searcherWebsite
Usage
Import :
import DropDown from "vue-drop-down-searcher";and use as
<DropDown list={list} selectedList={selectedItem} toggleItem={val => toggleItem} handleInputChange= {=>handleInputChange}/>API
Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| list | ArrayObject | [] | These array values will show in the dropdown |
| placeholder | String | Search | Input field placeholder |
| searchKey | String | Empty | Search Key for filter |
| isSingle | bool | false | if true, only one value can be selected from dropdown otherwise multi value can be selected dropdown |
| labelName | String | title | This value used to show which value is from the object in dropdown |
| selectedlabelName | String | title | From which value from the object need to show in the taginput |
| selectedList | ArrayOBject | [] | If values set, it will show those values as tag input |
| tagColor | String | #0074D9 | This color is used to set the background color to selected dropdown value in the text input |
| selectedDropdownColor | String | #0074D9 | This color is used to set the background color to selected index in dropdown |
Callback props
by using render props to override components some of the functionality will have to be >handled manually with a help of internal props, states and methods exposed
| Prop | Type | Default | Description |
|---|---|---|---|
| toggleItem | func | This will return the selected values from dropdwon | |
| inputChanged | func | When type something from the textfiled it will trigger |
Screenshots
-
Main Image
-
Single Dropdown
-
Multi Dropdown
Demo Gif
Contact Me
License MIT