select2-component
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)
install
npm i select2-component
link css
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
vuejs component demo
npm i vue vue-class-component
import "select2-component/vue";
<select2 :data="data"
:value="value"
@update="update($event)">
</select2>
the online demo: https://plantain-00.github.io/select2-component/demo/vue/index.html
reactjs component demo
import { Select2 } from "select2-component/react";
<Select2 data={this.data}
value={this.value}
update={value => this.update(value)}>
</Select2>
the online demo: https://plantain-00.github.io/select2-component/demo/react/index.html
angular component demo
import { Select2Module } from "select2-component/angular";
@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/demo/angular/index.html
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;
classes?: string;
};
type Select2Value = string | number;
type Select2UpdateValue = Select2Value | Select2Value[];
change log
import { Select2Module } from "select2-component/angular";
import { Select2 } from "select2-component/angular.component";
import { Select2Component } from "select2-component/angular";
<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";
<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";
<select2 [data]="data"
[value]="value"
(update)="update($event)">
</select2>
<select2 [data]="data"
[value]="value"
(select)="select($event)">
</select2>