5.0.0-0 • Published 6 years ago
react-select2-component v5.0.0-0
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)
link css
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
vuejs component
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
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 |
keydown, keyup, keypress | (e: KeyboardEvent) => void | triggered when search input triggers keydown, keyup, keypress |
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>
5.0.0-0
6 years ago