A vuejs, reactjs and angular select component.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

select2-component

Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads

A vuejs, reactjs and angular select component.

features

  • vuejs component
  • reactjs component
  • angular component
  • select one
  • options or groups
  • scroll
  • local search
  • select by keyboard
  • disabled option
  • disabled component
  • hide search box
  • placeholder
  • custom component(vuejs and reactjs only)
  • multiple selection
  • material style(angular only)
  • form binding(angular only)

link css

<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />

vuejs component

gzip size

npm i select2-vue-component

import "select2-vue-component";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/select2-vue-component/dist/select2-vue-component.min.js"></script>
<select2 :data="data"
    :value="value"
    @update="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/packages/vue/demo

reactjs component

gzip size

npm i select2-react-component

import { Select2 } from "select2-react-component";

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/select2-react-component/dist/select2-react-component.min.js"></script>
<Select2 data={this.data}
    value={this.value}
    update={value => this.update(value)}>
</Select2>

the online demo: https://plantain-00.github.io/select2-component/packages/react/demo

angular component

npm i select2-angular-component

import { Select2Module } from "select2-angular-component";

@NgModule({
    imports: [BrowserModule, FormsModule, Select2Module],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }
<select2 [data]="data"
    [value]="value"
    (update)="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/packages/angular/demo/jit

the AOT online demo: https://plantain-00.github.io/select2-component/packages/angular/demo/aot

properties and events of the component

name type description
data Select2Data the data of the select2
value Select2Value? initial value
disabled boolean? whether the component is disabled
minCountForSearch number? = 6 hide search box if options.length < minCountForSearch
placeholder string? the placeholder string if nothing selected
customSearchEnabled boolean? will trigger search event, and disable inside filter
multiple boolean? select multiple options
material "" or true enable material style(angular only)
editPattern (str: string) => string use it for change the pattern of the filter search(angular only)
ngModel/id/required/disabled/readonly/tabIndex just like a select control (angular only)
update (value: Select2UpdateValue) => void triggered when user select an option
open () => void triggered when user open the options
search (text: string) => void triggered when search text changed

select2 data structure

type Select2Data = (Select2Group | Select2Option)[];

type Select2Group = {
    label: string;
    options: Select2Option[];
    classes?: string;
};

type Select2Option = {
    value: Select2Value;
    label: string;
    disabled?: boolean;
    component?: string | Function; // the component
    classes?: string;
};

type Select2Value = string | number | boolean;

type Select2UpdateValue = Select2Value | Select2Value[];

change logs

# v4
npm i select2-component

# v5
npm i select2-vue-component
npm i select2-react-component
npm i select2-angular-component
// v4
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Module } from "select2-component/angular";

// v5
import "select2-vue-component";
import { Select2 } from "select2-react-component";
import { Select2Module } from "select2-angular-component";
// v4
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />

// v5
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
// v3 angular AOT:
import { Select2Module } from "select2-component/angular";

// v4 angular AOT:
import { Select2Module } from "select2-component/aot/angular";
// v3.1
import { Select2Module } from "select2-component/angular";
import { Select2 } from "select2-component/angular.component";

// v3.0
import { Select2Component } from "select2-component/angular";
// v3
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Component } from "select2-component/angular";

// v2
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
import "select2-component/dist/vue";
import { Select2 } from "select2-component/dist/react";
import { Select2Component } from "select2-component/dist/angular";
// v2
<select2 [data]="data"
    [value]="value"
    (update)="update($event)">
</select2>

// v1
<select2 [data]="data"
    [value]="value"
    (select)="select($event)">
</select2>