vue-custom-select-box

Vue-custom-select-box

Quick start install component NPM packages.

Documentation

1. __Installation__
1. __Example__
1. __Browser globals__
1. __Props__
1. __Slots__

Installation

install component from NPM

- NPM

``sh
# npm
npm install --save vue-custom-select-box

# yarn
yarn add vue-custom-select-box
`

- Global setup

`javascript
import VueCustomSelectBox from 'vue-custom-select-box';
import "vue-custom-select-box/style.css";

new Vue({
components: {
VueCustomSelectBox,
},
});

// or
Vue.component('vue-custom-select-box', require('vue-custom-select-box'));
// or
Vue.component('v-spinner', VueCustomSelectBox);
`
- Local setup

`javascript
import VueCustomSelectBox from 'vue-custom-select-box';
import "vue-custom-select-box/style.css";

export default {
// ...
components: { VueCustomSelectBox }
// ...
}

`
- Example
> Install component first then import it as you want as Global Local
`html

`
`javascript
import VueCustomSelectBox from 'vue-custom-select-box';
import "vue-custom-select-box/style.css";

export default {
// ...
data(){
return {
options: [
// ...
{
title: "Hello world",
id: 1
}
// ...
],
result: null
}
},
components: { VueCustomSelectBox }
// ...
}

`
- Browser globals

The dist folder contains vue-custom-select-box.umd.cjs and vue-custom-select-box.js
`html



// or


`

Props

| | Default | Type | Required |
| ------------------ | :----------------: | :-------------------------------: | :--------: |
| placeholder | -- Select -- | String | optional |
| searchPlaceholder | Search e.g abc.. | String | optional |
| selectAllLabel | Select all | String | optional |
| limit | undefined | Number | optional |
| selectAll | true | Boolean | optional |
| multiple | false | Boolean | optional |
| options | [] | Array | required |
| value | undefined | [Array, Object, String, Number] | required |
| optionValue | undefined | String | optional |
| optionText | undefined | String | optional |
| trackBy | undefined | String | optional |
| animated | true | Boolean | optional |
| disabled | false | Boolean | optional |
| closeOnSelect | false | Boolean | optional |
| clearInputOnSelect | false | Boolean | optional |

Slots

| Name | Example |
| ------------ | :---------------------------------------------------------------------------------------------------: |
| selectButton | |
| option | |
| noResult | ` |

> want to see more features? Contact me