The current version is 3.x
, if you are looking for 2.x
, you can find it here (also, see breaking changes).
Flexible select
Demo + Documentation
Features
-
no dependencies
-
props (30) allow you to customize a component in a various ways
-
slots (13) allow content to be changed anywhere
-
events (8) will let you know about everything
-
autocomplete (you can use custom search, you can also disable the search input)
-
keyboard controls (not only through the arrows)
-
support on mobile devices
-
validation, state of error and success
-
disabled and readonly
-
small and large sizes (as in bootstrap)
-
the ability to set your styles, you can write theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design
-
TypeScript support
-
tab navigation
-
SSR (Server-Side Rendering)
-
auto determine the suitable position for the menu if it goes beyond the viewport
Write your suggestions, glad to add.
Installation
yarn add vue-cool-select
or npm install --save vue-cool-select
Get started
NPM
- Import this plugin, css (theme) and add plugin via
Vue.use
:
// paste the line below only if you need "bootstrap" theme// paste the line below only if you need "material-design" theme// you can also import your theme Vue
- Use inside another component:
components: CoolSelect { return // simple example of items items: 'Item 1' 'Item 2' 'Item 3' // there will be a selected item selected: null }
- Add to
<template>
:
<cool-select v-model="selected" :items="items"/>
Browser (CDN)
Include vue-cool-select in the page.
<!-- paste the line below only if you need "bootstrap" theme --><!-- paste the line below only if you need "material-design" theme -->
If Vue is detected in the Page, the plugin is installed automatically.
Documentation and examples here.
TODO
- multi-select
- 100% tests coverage
I am happy to add something or improve, you can write what you want to see. I also have more motivation to work if you give a star, thanks! 😄