Skip to content

Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

Notifications You must be signed in to change notification settings

firework/fire-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🔥_Fireselect_

Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly.

It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

Options

name | type | default

  • options | Array | []
    An array of the initial available options.

  • multiple | Boolean | false
    Equivalent to the select multiple attribute.

  • create | Boolean | false
    Allows the creation of new items that aren't in the list of options.

  • helper-message | String | 'Type anything to search'
    Placeholder attribute of search input.

  • placeholder | String | 'Select an item'
    Placeholder attribute of fireselect.

  • add-label | String | 'Add:'
    Text to add new option.

  • no-results-label | String | 'No results found for:'
    Text to appear when no option is found.

  • animation | Boolean | true
    Show animation when item is selected

  • name | String | fire-select[]
    Name attribute of input

  • id | String | fire-select
    Id attribute of input

Usage

<!-- Import the style -->
<link rel="stylesheet" href="../dist/fire-select.css">
..
<!-- Import the script -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<script src="../dist/fire-select.js"></script>

<!-- Use fire-select component -->
<fire-select :options="options"></fire-select>

Options

var obj = [
    {value: 'html', label: 'HyperText Markup Language', selected: true},
    {value: 'css', label: 'Cascading Style Sheets'},
    {value: 'js', label: 'Javascript'},
];

var arr = ['HyperText Markup Language', 'Cascading Style Sheets', 'Javascript'];

Events

Vue.js - Dispatch

  • fsOptionAdded When a new item is added.

  • fsOptionSelected When a item is selected.

  • fsOptionDeselect When a item is deselected.

new Vue({
  ...
  events: {
    fsOptionAdded: function(option) {
      // do something
    }
  }
}

About

Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •