All Projects → iliyaZelenko → Vue Cool Select

iliyaZelenko / Vue Cool Select

Licence: mit
Select with autocomplete, slots, bootstrap and material design themes.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Cool Select

Smartmaterialspinner
The powerful android spinner library for your application
Stars: ✭ 108 (-44.62%)
Mutual labels:  search, material-design, autocomplete
Angular Search Experience
Algolia + Angular = 🔥🔥🔥
Stars: ✭ 167 (-14.36%)
Mutual labels:  search, material-design, autocomplete
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-68.72%)
Mutual labels:  search, input, select
React Selectrix
A beautiful, materialized and flexible React Select control
Stars: ✭ 166 (-14.87%)
Mutual labels:  material-design, autocomplete, input
Autocomplete
🔮 Fast and full-featured autocomplete library
Stars: ✭ 1,268 (+550.26%)
Mutual labels:  search, autocomplete, select
Jhform
JhForm - 自定义表单工具,更加简单,快捷的创建表单、设置页面
Stars: ✭ 108 (-44.62%)
Mutual labels:  input, select
Servicestackvs
ServiceStackVS - Visual Studio extension for ServiceStack
Stars: ✭ 117 (-40%)
Mutual labels:  material-design, bootstrap
Bootstrap Autocomplete
Bootstrap Autocomplete
Stars: ✭ 121 (-37.95%)
Mutual labels:  autocomplete, bootstrap
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+5575.9%)
Mutual labels:  material-design, bootstrap
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+4752.82%)
Mutual labels:  material-design, bootstrap
Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (+823.08%)
Mutual labels:  material-design, bootstrap
Domino Ui
Domino-ui
Stars: ✭ 138 (-29.23%)
Mutual labels:  material-design, bootstrap
Vue Places
Places component is based on places.js for Vue 2.x. Turn any <input> into an address autocomplete.
Stars: ✭ 106 (-45.64%)
Mutual labels:  autocomplete, input
React Input Enhancements
Set of enhancements for input control
Stars: ✭ 1,375 (+605.13%)
Mutual labels:  autocomplete, input
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-48.72%)
Mutual labels:  input, select
Modernsearchbar
The famous iOS search bar with auto completion feature implemented.
Stars: ✭ 167 (-14.36%)
Mutual labels:  search, autocomplete
Google Maps Autocomplete
Autocomplete input component and directive for google-maps built with angular and material design | ANGULAR V9 SUPPORTED
Stars: ✭ 134 (-31.28%)
Mutual labels:  material-design, autocomplete
Selectize.js
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
Stars: ✭ 12,744 (+6435.38%)
Mutual labels:  input, select
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+4742.05%)
Mutual labels:  select, bootstrap
Downshift
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Stars: ✭ 10,183 (+5122.05%)
Mutual labels:  autocomplete, select

Coverage Downloads Version License CircleCI Build Status Language grade: JavaScript codebeat badge codebeat badge Downloads Contributors

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes).

Flexible select Tweet

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

  1. Import this plugin, css (theme) and add plugin via Vue.use:
import { CoolSelectPlugin } from 'vue-cool-select'

// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme

Vue.use(CoolSelectPlugin)
  1. Use inside another component:
import { CoolSelect } from 'vue-cool-select'

export default {
  components: { CoolSelect },
  data () {
    return {
      // simple example of items
      items: ['Item 1', 'Item 2', 'Item 3'],
      // there will be a selected item
      selected: null
    }
  }
}
  1. Add to <template>:
<cool-select
  v-model="selected"
  :items="items"
/>

Browser (CDN)

Include vue-cool-select in the page.

<script src="https://unpkg.com/vue-cool-select"></script>

<!-- paste the line below only if you need "bootstrap" theme -->
<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css">
<!-- paste the line below only if you need "material-design" theme -->
<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/material-design.css">

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! 😄

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].