Skip to content

Ahmedreda20/vue-custom-select-box

Repository files navigation

Vue-custom-select-box

Quick start install component NPM packages.

Documentation

  1. Installation
  2. Example
  3. Browser globals
  4. Props
  5. Slots

Installation

install component from NPM

  • NPM

    # npm
    npm install --save vue-custom-select-box
    
    # yarn
    yarn add vue-custom-select-box
  • Global setup

    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

    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

    <template>
      <div>
        <VueCustomSelectBox 
            v-model="result"
            :options="options"
            option-value="id"
            option-text="title"
        />
      </div>
    </template>
    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

    <link rel="stylesheet" href="path/to/style.css" />
    <script src="path/to/vue.js"></script>
    <script src="path/to/vue-custom-select-box/dist/vue-custom-select-box.js"></script>
    // or
    <script src="path/to/vue-custom-select-box"></script>
    <script>
      var app = new Vue({
        el: '#app',
        components: {
          VueCustomSelectBox,
        },
      });
    </script>

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 <template v-slot:selectButton="{open, tags, multiple, originalLimit, limited, label}"></template>
option <template v-slot:option="item"></template>
noResult <template v-slot:noResult="search"></template>

want to see more features? Contact me

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published